网页移动端适配的方法

移动端适配的文章很多，自己都看晕了，特别想找一个一劳永逸的又简洁的解决方案。

设计原则：文字流式，控件弹性，图片等比缩放。字体使用px设置大小，控件多使用flex布局来定位，图片等使用rem来设置。为达成这样的效果，设置分为3步：

视口viewport设置
使用css媒介查询设置font-size
使用js设置rem

设置viewport

先加个视口适配，不加这个，布局视口宽度将变成980px(这是iphone的safari默认的，别的手机别的浏览器可能不一样)，而不是移动设备本身的视口宽度。另外也可以设置让用户可以缩放，看需求。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

设置font-size

有不少做法喜欢将html的font-size设置为100px，然后所有的单位都用rem来设置（1rem等于html的font-size），包括之后字体，比如font-size: 0.16rem。那会导致比如手机竖屏切换为横屏的时候，字体也相应的变宽了，而且小数太多也不方便，一般是希望字体大小保持不变，流式排版。所以font-size使用px做单位，用css的媒介查询根据布局视口的宽度进行设置，类似这样：

@media (min-width: 320px) {
    .my-class {
        font-size: 10px;
    }
}
@media (min-width: 375px) {
    .my-class {
        font-size: 12px;
    }
}
@media (min-width: 400px) {
    .my-class {
        font-size: 15px;
    }
}
@media (min-width: 640px) {
    .my-class {
        font-size: 20px;
    }
}

设置rem

比如现在拿到一张设计稿，宽度一般是640或750物理像素(pt)，以750为例，其CSS宽度为375px，这也是iphone6/7/8的宽度（分辨率dpr为2）。为了方便，设计body的宽度为7.5rem，尺寸使用rem，那么焦点集中在如何正确设置html的font-size，这个不能再用媒介查询设置，应该使用js。定义函数如下：

function adjustFontSize() {
    document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    //也可以设置如果超过640了（iPad），就按640算，再大没意义
}

注：也可以换成给document.documentElement.style.fontSize赋值，因为document.documentElement就是根节点html。另外，
document.documentElement.clientWidth也可以换成window.innerWidth，一般是一样大，pc端有时候前者略小，因为后者包含滚动条，而后者IE不支持，但可以从<body>中获取，...深究下去没完了。

最终页面根元素html的font-size就被设置为50px了，也就是1rem的尺寸。如果要画一个120px宽的<div>，只需要设置width: 2.4rem。

将函数绑定到这三个事件上：

document.addEventListener('DOMContentLoaded', adjustFontSize(), false);
//不要使用onload，会等所有css资源什么都加载完
window.addEventListener('orientationchange', adjustFontSize(), false);
window.addEventListener('resize', adjustFontSize(), false);

可以使用getComputedStyle(document.documentElement)['font-size']来查看当前html的font-size。

效果

竖着的：

image.png

横过来：

image.png

所以，别用rem设置字体大小，如果想固定不变就用px；如果想跟着宽度离散变化就在媒介查询里设置(推荐)；如果想连续变化就用js设置(感觉没必要)。

问题

好像也可以全部使用媒介查询设置，说到底js也是根据宽度设置了font-size，可以如下设置一系列：

@media (min-width: 375px) {
    html {
        font-size: 50px;
    }
    body {
        font-size: 12px;
    }
}
//省略了其它常用尺寸的，比如320px 400px 640px

优点是不需要js渲染，可能性能好一些；缺点就是pc端浏览时，rem设置宽度的元素在缩放时不是连续的；

如果只使用媒介查询，方向变化后min-width也自动变化了，其实可以不绑定上文window的两个事件；
分辨率的问题，暂未细细研究，待补充。

参考了网上不少文章，主要是这篇网易和淘宝移动WEB适配方案再分析及其参考。

最后编辑于：2018.05.24 15:50:16