css --- 移动端布局流程分析与总结

1、em 似乎更适合在顶级父元素设置 font-size，然后各级子元素用 em 来进行字体大小设置。不适合在各级设置 font-size 因为这样每一级的子元素的 font-size 都是相对于直接父元素，这样同样的1em，最终值的大小是截然不同的，也是不可预测的；

2、简单问题简单解决：文字流式，控件弹性，图片等比缩放。必要时用 @media screen and (max-width: 330px) 做适配；

3、网页布局的时候，采用的方式是：网易页面上 html 的 font-size 不是预先通过媒介查询在css里定义好的，而是通过js计算出来的。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

取一个 100px 的 font-size 为参照，宽度为 640px 的话，那么 body 元素的宽度：6.4 rem。于是，html 的 font-size = deviceWidth / 6.4，根据这个规则计算如下：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

这个deviceWidth 通过 document.documentElement.clientWidth 就能取到！所以当页面的dom ready后，做的第一件事情就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
这个 6.4 是根据设计稿的 横向分辨率 / 100 得来的。

--【1】--- 推理出来的网易的做法是：

1）设计稿的横向分辨率除以 100，得到 body 元素的宽度（一个基数）：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

注意：<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> 需要先设置！

2）布局时，设计图标注的尺寸除以 100，得到 css 中的尺寸：

播放器高度 210px，写样式的时候，可以这么写 height: 2.1rem。取 100 也是为了计算方便。

3）在 dom ready 以后，通过以下代码设置 html 的 font-size：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
6.4 只是一个例子，如果是750的设计稿，应该除以7.5。

4）font-size 可能需要额外的媒介查询，并且 font-size 不能使用 rem：

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

5）当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽：

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

--【2】--- 推理出来的淘宝的做法是：

device-width = 设备的物理分辨率/(devicePixelRatio * scale)，
在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio。

devicePixelRatio称为设备像素比，每款设备的devicePixelRatio 都是已知，并且不变的，目前高清屏，普遍都是2，淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置：

在devicePixelRatio为2的时候，scale为0.5；在devicePixelRatio为3的时候，scale为0.3333；
这么做目的当然是为了保证页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸，只要除以某一个值就能够转换为rem了。

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

淘宝布局的第二个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10；
接下来要解决的问题是，元素的尺寸该如何计算，比如说设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素时150px的宽，换算成rem就是150 / 75 = 2rem。

1）动态设置 viewport 的 scale：

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2）动态计算html的font-size：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

3）布局的时候，各元素的css尺寸=设计稿标注尺寸/(设计稿横向分辨率/10)，这里的括号是我加的；

4）font-size可能需要额外的媒介查询，并且font-size不使用rem（用px）。淘宝也设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。

设计 -> 输出 -> 开发 ->适配调试：

 原始出处：https://www.cnblogs.com/Charliexie/p/6900640.html。