前言
随着联通设备的普及，移动web在前端工程师的工作中占据着越来越重要的地位。 移动设备更新频率频繁，手机厂商复杂。 问题是每台机器的屏幕长度和帧率都不同。 这降低了我们在编译后端接口时的难度，而适配问题此刻也越来越突出。 记得刚开始开发移动产品的时候，我向设计MM要了不同屏幕的设计图，结果可想而知。 这篇博文分享了一些处理多屏适配的经验，希望对您有所帮助。
特别提示：在开始这一切之前，请把以下meta添加到开发联通接口的工程师的肚子里：
简单的事情容易做——宽度自适应
所谓长度适配严格来说是PC端自适应布局形式在移动端的延伸。 这是在处理PC端后端界面时需要全屏布局时使用的布局形式。 其实现方法也比较简单。 内部容器元素按照比例填充，里面的子元素固定或者左右浮动。
.div {
宽度：100%；高度：100px；
。孩子 {
向左飘浮;
。孩子 {
浮动：右；
由于父元素采用比例布局，随着屏幕的拉伸，其长度会无限拉伸。 并且因为子元素是浮动的，所以它们的位置也会固定在两端。 这种长度改编在新时代有了新的方式。 随着灵活布局的流行，常常被flex或者box等灵活布局方式所取代，变得越来越“有弹性”。 要了解灵活布局，请对比Flex布局教程和卤煮盒子布局教程。
尺寸差异-完全自适应
“完全自适应”是绿竹给悦悦解决方案的别称。 由于露珠现在找不到正式名称，所以暂时这么称呼。 与之前的解决方案相比，这个解决方案取得了很大的进步。 不仅长度自适应，界面中所有元素的大小和高度都会根据不同帧率和屏幕长度的设备进行调整。 元素、字体、图片和高度等属性的值。 简单来说，在不同的屏幕下，你看到的字体以及元素的高度和长度的大小是不同的。 这里，有人会说，借助媒体查询熟悉程度，根据不同的屏幕长度调整样式。 做饭之前我也是这么想的，但是需要考虑到界面上很多元素都需要设置字体。 如果使用媒体查询为不同设备上的每个元素设置不同的属性，那么有多少个屏幕？ 我们的css会缩小多少倍。 其实这里我们利用js和css熟悉一下rem来解决这个问题。
REM属性是指设置元素相对于根元素的字体大小。 也可以作为一系列可以用px来标记的单位，比如设置高度。
html{
字体大小：10px；
div {
字体大小：1rem；
高度：2rem；
宽度：3rem；
边框:.1remsolid#000;
采用上面的写法，div继承了html节点的font-size，并为自己定义了一系列的样式属性。 此时1em估计为10px，即根节点的font-size值。 因此，此时div的高度为20px，宽度为30px，边框为1px，字体大小为10px； 一旦有了这个方法css字体自适应，我们自然就可以根据不同的屏幕长度设置不同的根节点字体大小了。 假设我们今天设计的标准是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中，我们添加上面的代码来动态改变根节点的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(function(){
vardeviceWidth = document.documentElement.clientWidth > 1300?1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
},50);
顺便解决一下高保真指示与实际开发价值的比例问题
如果大家的设计稿标准是iphone5，那么当你收到设计稿的时候，你一定会发现根本不能按照高保真标记来写css，而是每个值各取一半，因为联通的帧率装备不同。 设计师在iphone5真机上做了标记，iphone5系列的帧率为640。其实我们只需要按照320的标准进行开发即可。 为了节省时间css字体自适应，我们不需要每次都将标记切成两半，我们可以缩放整个网页来模拟帧速率的增加。 这个方法很简单，只需针对不同设备设置不同的meta即可：
varscale = 1 / devicePixelRatio；
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', Maximum-scale=' + scale + ',minimum-scale=' + scale + ', 用户可扩展=否');
这个设置也可以解决1px像素在Android机下看起来太粗的问题，因为在像素大小为1px的Android机下，边框的1px被压缩为0.5px。 简而言之，一劳永逸！ 淘宝、网易新闻的移动网页端均采用上述形式来适配各种设备的屏幕。 如果您有兴趣，可以参考一下。 这是完整的代码：
测试
name =“viewport”content =“width = device-width，user-scalable = no，maximum-scale = 1”/>
