前言
随着移动设备的普及，移动web在前端工程师的工作中占据着越来越重要的地位。 移动设备更新频繁，手机制造商众多。 问题是每台机器的屏幕宽度和分辨率都不一样。 这让我们编写前端界面变得更加困难，适配问题在当下也越来越突出。 记得刚开始开发手机产品的时候，向设计MM要了不同屏幕的设计图，结果可想而知。 这篇博文分享了处理多屏适配的一些经验，希望对大家有所帮助。
特别提示：在开始这一切之前，请在开发移动界面的工程师的头上添加以下元数据：
简单的事好做——宽度自适应
所谓宽度自适应，严格来说是PC端自适应布局方式在移动端的延伸。 在处理PC端的前端界面时，需要全屏布局时使用这种布局方式。 它的实现方法也比较简单。 外层容器元素按照百分比填充，里面的子元素固定或者左右浮动。
.div {
宽度：100%；高度：100px；
}
。孩子 {
向左飘浮;
}
。孩子 {
浮动：对；
}
由于父元素采用百分比布局，随着屏幕的拉伸，它的宽度会无限拉伸。 由于子元素是浮动的，它们的位置也会在两端固定。 这种宽度适配在新时代有了新的方法。 随着弹性布局的流行，它常常被flex或box等灵活的布局方式所取代div高度自适应屏幕，变得越来越“弹性”。 想了解灵活布局可以去Flex布局教程和卤煮盒子布局教程进行对比。
尺寸差异-完全自适应
“完全自适应”是绿竹对悦悦解决方案的称呼。 由于绿竹现在找不到正式的名字，所以就暂且这么称呼吧。 与上一个方案相比，这个方案有了很大的进步。 不仅宽度自适应，而且界面所有元素的大小和高度都会根据不同分辨率和屏幕宽度的设备进行调整。 元素、字体、图片、高度等属性的值。 简单的说，在不同的屏幕下，你看到的字体和元素的高宽是不一样的。 在这里，有人会说熟悉媒体查询，根据不同的屏幕宽度调整样式。 之前我也是这么想的，但是你需要考虑到界面上很多元素都需要设置字体。 如果在不同的设备下用media query给每个元素设置不同的属性，那么屏幕有多少？ 我们的css会增加多少倍。 其实在这里，我们使用js和css来熟悉rem来解决这个问题。
REM 属性是指设置元素相对于根元素的字体大小。 也可以作为一系列可以用px标注的单位，比如设置高度。
HTML {
字体大小：10px；
}
分区{
字体大小：1rem；
高度：2rem；
宽度：3rem；
边框：.1remsolid#000；
}
使用上面的写法，div继承了html节点的font-size，为自己定义了一系列style属性。 此时1em计算为10px，即根节点的font-size值。 因此，此时div的高度为20px，宽度为30px，边框为1px，字号为10px； 一旦有了这样的方法，我们自然就可以根据不同的屏幕宽度设置不同的根节点字体大小了。 假设我们现在设计的标准是iphone5s，iphone5系列的屏幕分辨率是640，为了规范统一，我们将iphone5分辨率下根元素的font-size设置为100px；
HTML {
字体大小：100px；
}
基于此，可以计算出 6.4 的比率。 我们可以知道根元素在其他手机分辨率的设备下的字体大小：
/*
数据计算公式 640/100 = device-width / x 可以设置其他设备根元素的字体大小
ihone5：640：100
iPhone6: 750 : 117
iphone6s: 1240 : 194
*/
vardeviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
在head中，我们添加上面的代码div高度自适应屏幕，动态改变根节点的font-size值，得到如下结果：
接下来我们可以使用rem根据根元素的字体大小来设置各个属性的相对值。 当然，如果是移动设备，屏幕会有上下限。 我们可以将分辨率控制在一定范围内。 如果超过这个范围，我们将不再增加根元素的字体大小：
vardeviceWidth = document.documentElement.clientWidth > 1300?1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
一般来说，不需要考虑屏幕的动态伸缩。 当然，如果用户打开了屏幕传输设置，在网页加载完成后改变了屏幕的宽度，那我们就不得不考虑这个问题了。 解决这个问题也很简单。 您可以通过监视屏幕变化来动态切换元素样式：
window.onresize = function(){
vardeviceWidth = document.documentElement.clientWidth > 1300?1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
};
为了提高性能，让代码更完美，可以给它加一个throttle函数：
window.onresize = _.debounce(函数(){
vardeviceWidth = document.documentElement.clientWidth > 1300?1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
},50);
顺便解决高保真标注与实际开发价值的比例问题
如果你的设计稿标准是iphone5，那么当你拿到设计稿的时候，你肯定会发现根本不能按照高保真标志写css，而是每个值取一半，因为移动设备的分辨率是不同的。 设计师在iphone5真机上标注，iphone5系列的分辨率是640，其实我们只需要按照320的标准进行开发即可。 为了节省时间，我们不需要每次都将标签切成两半，我们可以缩放整个网页来模拟增加分辨率。 这个方法很简单，不同的设备设置不同的meta即可：
varscale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
这个设置也可以解决1px像素在Android机下看起来太粗的问题，因为在像素大小为1px的Android机下，边框的1px被压缩为0.5px。 总之，一劳永逸！ 淘宝网和网易新闻的移动网页端采用上述方法适配各种设备的屏幕。 有兴趣的可以参考一下。 这是完整的代码：
测试
name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1" />
