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

Posted 2020-11-08 小凡的耿

移动端屏幕适配基础

　　制作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代码完成适配：

 

//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName(‘html‘)[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + ‘px‘;