Vue.js+Koa2移动电商实战3

Posted 小凡的耿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js+Koa2移动电商实战3相关的知识,希望对你有一定的参考价值。

移动端屏幕适配基础

  制作webapp时一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样,这让很多小伙伴很是头疼。在这里我介绍一下我平时工作中常用的适配方案,当然适配方案有很多种,所以你有更好的方法,也可以使用或者大家一起交流。

 常见移动web布局适配方法

  • 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,几乎达不到大型项目的要求,属于过时的方法。
  • Media Query(媒体查询):现在比较主流的适配方案,比如我们常用的样式框架Bootstrap就是靠这个起家的,它能完成大部分项目需求,但是编写过于复杂。
  • flex布局:主流的布局方式,不仅适用于移动Web,网页上也表现良好,这也是现在工作中用的最多的布局方式,那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

 rem单位介绍

  rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

  • 适配原理:将px替换成rem,动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。

  现在我们作一个实验,你可以新建一个网页,并写入如下代码:

<div class="test">
    <p class="hello">Hello jspang</p>
</div>
 

  然后给html一个基本的样式:

.test{
    width:320px;
    height:160px;
    background-color: bisque;
    text-align: text;
}
.hello{
    color:red;
}

  上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。

我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px,那么换成rem单位,直接除以16就好。

 

.test{
    width:20rem;
    height:10rem;
    background-color: bisque;
    text-align: text;
}
.hello{
    color:red;
    font-size:1rem;
}
 

  页面并没有什么变化,也就是说我们掌握了换算关系。为了更好的说明这点,我们可以试着给html根样式加入字体大小,比如换成font-size:32px;。这时页面和字体都扩大了一倍。但是我们现在还是不能实现适配,因为我们根元素的字体是固定的。

 JS控制适配屏幕

  明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。当然你有更好的方案,也可以在文章下方进行留言。
三行JS代码完成适配:



以上是关于Vue.js+Koa2移动电商实战3的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js+Koa2移动电商实战6

Vue.js+Koa2移动电商实战4

Vue.js+Koa2移动电商实战2

Vue+Koa2移动电商实战 密码加密

Vue+Koa2移动电商实战 mock数据使用和布局

Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏