移动端屏幕适配（基础）

常见移动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 World</p>
</div>

然后给html一个样式

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

使用px作为单位，在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的，再查看一下字体，发现大小是16px。

iphone5环境

在移动端调试模式 iphone6/7/8 环境查看。刷新页面后会发现div的宽度较窄，再查看一下字体，发现大小还是16px。

iphone6/7/8环境

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

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

页面并没有什么变化，我们只是掌握了换算关系，还不能实现适配，因为我们根元素的字体是固定的。

JS控制适配屏幕

明白了REM的原理后，可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。
如果你有更好的方案，可以在文章下方进行留言。

<script>
      /* 获取移动端屏幕的宽度 */
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
      /* 获取html DOM元素 */
      let htmlDom = document.getElementsByTagName("html")[0];
      /* 设置根元素字体大小 */
      htmlDom.style.fontSize = htmlWidth / 20 + "px";
</script>

在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的，查看一下字体，发现大小是16px。

适配后iphone5环境

在移动端调试模式iphone6/7/8环境查看一下。会发现div的宽度也是正好的，再查看一下字体，发现大小是18.75px。

适配后iphone6/7/8环境

最后编辑于：2020.04.10 16:14:52