移动布局+百分比布局+em+rem+动态设置根元素fontSize

流式布局

移动端大量使用CSS3盒子模型 box-sizing

box-sizing: border-box; 很重要

移动端特殊样式

如何动态设置html的 font-size

开始

js动态设置代码，这里style里面就不用写 html{font-size:100px;}

这样应该就可以完成自适应了，记得编码时不要用 px，而是用 px / 100 后的值，单位是rem。比如，当手机是iphone6时，设备独立像素是375px， document.documentElement.clientWidth / 3.75 的值是100 ，此时 html的fontSize 是100px，如果设计师给的背景图片宽度是以iphone6为基础（375px）设计的（且图片宽度占满全屏—375px），那么我们只要写img 的宽度为 width: 3.75rem; , 3.75rem是通过 375px 除以html里fontSize的值（100px）得出的。

当手机是iphone6 Plus时，设备独立像素是414px， document.documentElement.clientWidth / 3.75 的值是 110.4，此时 html的fontSize 是110.4px，如果设计师给的背景图片宽度是以iphone6 Plus为基础（414px）设计的（且图片宽度占满全屏—414px），那么我们只要写img 的宽度为 width: 3.75rem; , 3.75rem是通过 414px 除以html里fontSize的值（110.4px）得出的。
注意这里也是 3.75rem；

所以当我们确定手机只用 iphone6时，可以在 html 中写固定的 font-size 等于100px，然后用设计师给的图片等元素的实际px除以100计算出 最终的rem，但是这种固定值的情况一般值出现在PC端开发，如PC端html的font-size 会设置为 16px好像。但是在移动端就得使用js动态计算了
计算js代码如下

继续

重点：如果让html元素字体的大小，恒等于屏幕宽度的 1/100，那1rem 和 1x 就等价了

推导

按照前面所述，如果只适配iphone6，html的font-size 设置为 100px，计算时直接用 设计师给的元素的 px 除以 100 得到 xxxrem；
所以，如果iphone6 设置一个100px，等价于设置多少个 vw呢？
思考提示：
iphone6 ： 375px 设备独立像素 占 100vw
则有
375px / 100vw = 100px/ ?
计算得 ？ = 26.667vw
故
直接在 html中填写 26.667vw可以达到和 编码js 同样子的效果，之后写CSS时直接使用设计师的px除以100 即可得到 想要的 最终rem结果

总结：
结果就是html 设置 font-size 为 26.667vw 即可
其实这里的26.667vw就是指 100px;(iphone 6)

然后给个demo 如下


别忘了设置

demo（iphone6 ）中 样式里面 .box h2 { font-size: 0.2rem; width: 3rem;},
此时
.box h2 的宽 width是 3rem，即3 * 100 = 300px;
.box h2 的font-size 是0.2rem ,是 20.0002px约等于 20px，即 0.2 * 100 = 20px;
如果这里不手动写 font-size ： 0.2rem; 则 文字的 font-size默认使用根元素的font-size大小，即 100.001px约等于 100px，这里的小数应该是 html{ font-size: 26.667vw} 导致的

在最后问一下图片处理：问题来自 https://www.cnblogs.com/jiangzilong/p/6700023.html
手机屏幕变大但是加载的图片不会变大，一般不需要一起变大吧？？？
iphone6Plus dpr 为3

【在非标准屏幕上以同样大小显示同一张图片时,就需要缩放图片大小】咋解决呢，不至于写js动态去适配所以设备吧？？？？？？？？

rem是如何实现自适应布局的？
http://caibaojian.com/web-app-rem.html

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}