9 - 简书

90.PNG

注意em和rem不同哦,
rem是html的fontsize，没有特别设置就是默认的（页面上默认的font-size是16px）
em就是我自己的fontsize的像素值（一般用m作为参考，是一个汉字宽度）

手机端方案的特点：所有手机显示的界面都是一样的，只是大小不同
用百分比布局各种缺陷，缩放，然后以宽度为标准比较好的缩放，
然后所有单位和宽度都无关，于是用js设置rem与页面宽度有关
动态rem，1 rem == html font-size == viewport width

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
然后就达成1rem=1html的fontsize=pageWidth

然后，这个时候一个div占40%就用0.4rem来表达，但是特别小的换过来不好看，比如0.01rem，所以我们可以

var pageWidth=window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
然后就达成10rem=10html的fontsize=pageWidth

注意这里如果除以100会觉得很好表达啊，但是实际上1rem对应的px实在太小了（已经小于浏览器默认的最小单位了），就会变成浏览器默认的最小px，所以我们除以10就好了

REM 可以与其他单位同时存在
比如border：1px solid；1px这种特别小的就用px来表达吧，font-size也是，这种很小的可以用px或者em都可以

px 自动变 rem
等我换os之后再来看好了

9

推荐阅读更多精彩内容