移动端适配方案-rem(基础篇)

　　

　　常见移动web适配方案通常有3种方法，以下图：

　　

　　　　 ①：定高，宽度百分比（通常用来作一些适配性不高的页面，好比主要以一些文字和图片为主的网页或移动端的头部和底部）

　　　　②：flex （更多的用于复杂页面的布局。具体参照阮一峰大神写的-Flex 布局教程：语法篇和实例篇

　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool （语法篇）

　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-examples.html  （实例篇）

　　　　③：媒体查询（css3 media媒体查询器用法总结：http://www.bubuko.com/infodetail-268180.html

　　　　注：flex布局和媒体查询以及接下来要讲的rem均可以实现移动端的平常响应式开发

　　　　　　推荐使用flex布局或rem来实现移动端的响应式开发，由于媒体查询要单独针对不一样的分辨率写相应的样式，你懂得

 

 

　　　　Rem:（等比例缩放）【推荐】

　　　　如下是我在学习rem的过程中看过的2篇写得比较好的文章，内容易理解，也比较全面，适合入门。

　　　　看完之后，对rem就了解得差很少了，因此就再也不赘述。

　　　　https://www.jianshu.com/p/b00cd3506782　　手机端页面自适应解决方案—rem布局基础篇

　　　　https://www.jianshu.com/p/985d26b40199　　手机端页面自适应解决方案—rem布局进阶版

 

 

　　补充：（字体大小建议根据实际状况来决定使用rem或px）

rem通常用于设置根元素字体大小，1rem就是html根元素的字体大小，2rem就是html字体大小的2倍，1.5rem是html字体的1.5倍，0.75rem则是html字体大小的四分之三，依此类推。 所以，rem是一个相对长度单位，当改变html根元素的字体大小时，全部以rem为单位的都会随之放大或缩小。 首先你须要知道rem是指页面根元素的字体大小，即html的font-size，默认状况下，html的font-size是16px，至关于1rem = 16px; 但有一种状况须要考虑，即：若是rem被改变时。好比你引入的第三方UI组件或插件中设置了html的font-size:100px; 那么此时的1rem = 100px;会覆盖浏览器默认的1rem = 16px; 若是引入第三方UI组件或插件单位用的px，还须要所有转换成rem