移动端屏幕适配

常见移动web适配方法：

1.固定高度，宽度百分比：过时。

2.Media Query（媒体查询）：如bootstrap  （缺点：编写过于复杂）。

3.flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem单位介绍

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

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

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

<div class="container">
    <p class="hello">Hello world</p>
</div>

样式如下：

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

这时，在移动端调试模式iphone5环境查看一下（不同的手机对应不同的width,本例以iphone5为例适配其他）。会发现div的宽度是正好的，我们再查看一下字体，发现大小是16px。

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

.container{
    width:20rem;
    height:10rem;
    background-color: bisque;
    text-align: text；
}
.hello{
    color:red;
}

页面并没有什么变化，也就是说我们掌握了换算关系。为了更好的说明这点，我们可以试着给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';
//这行可有可无

  if(htmlwidth>750){htmlwidth=750};

以上就是：移动端用Rem + JavaScript完成屏幕适配的方法。亲测有效。