总结：rem布局牛逼！！刚开始的时候感觉复杂难懂，做了一下之后发现这个布局之强大！！是别的布局所没有的——-它可以动态调整高度和字体大小！！！！！保证不同屏幕的手机看到的布局也是一样的，非常牛逼！！！别的百分比或者是弹性布局都是只能调整宽度，高度是定死的，这样就会导致改变宽度的时候高度不变，布局压缩，就会影响美观，而这个布局就解决了这些问题。
布局的宽度用百分比，弹性，或者rem都可以混用的，哪个快捷用哪个，但是高度和字体大小一定要是rem。
思路：
rem布局整体上有两种思路（更推荐第二种）
第一种思路是rem+less+媒体查询：
这个方法是利用less设置多个媒体查询，因为rem设计稿会设计好份数，有的10，有的15，有的20，然后用font-size：（屏幕大小px/份数）。括号不能省。。。less会自动帮你计算好字体标准大小px。然后进行对屏幕大小的判断后，在设置html的字体大小，在对less @import引入媒体查询后，即可在less里用rem单位了，用法是 属性：（实际的px rem/字体标准大小）括号不能省。。。如width：（100rem/15）就是100px的rem数值。
最后超出750px的部分就以750px的屏幕来计算，所以有了html { font-size：50px}的操作
媒体查询截图
实际使用截图
第二种是rem+flexible.js +(px->rem)vs插件
这种思路更加的方便快捷，因为当你导入了flexible.js之后，flexible.js会自动将你的屏幕份数定为10，而且不用你再去less里一个一个的设置了，在750px~320px里他会帮你自动设置份数为10，所以说如果你的设计稿为750px，除以10之后就是75px，就是你的字体标准大小，然后你只需要记住75px是你的字体标准大小。然后调整好px->rem的插件以后，你在less里直接写像素，可以直接转化成你想要的rem大小，大大提升了开发的效率！！！
但是超出750px的部分记得要进行媒体查询判断，把字体标准大小设置为750px时候的大小
若有收获，就点个赞吧
0 人点赞
