移动端rem布局 和 meta标签 content="width=750"里面用px布局的区别
REM 是 HTML 页面的字体大小,可以增大或减小。一般移动终端的移动页面根据宽度来设置HTML的字体大小。
通过闭包函数,可以解决自适应移动页面的编写。
px和rem的换算与设置
一般来说, 所有浏览器的html根元素都是font-size:16px1rem=16px,所以所有转换设计稿px/转换后的rem=16px/1===>转换后的rem=设计稿px的px值都是以它为基础的。/16px一般用来指代这个特定的屏幕,因为我们手头的移动端设计稿是基于iphone6的。
iPhone 6的屏幕宽度为375px; 因此,设置参考 rem=375/10=37.5/10,这只是一个经验法则。
设置html根元素的字体大小; 使用flexible.js 什么是flexible.js? 看一下源码参考:https://dwbbb.com/blog/flexible/https://www.jianshu.com/p/3a07024963d9 其实, flexible.js的主要功能有: 1、为html属性添加data-dpr属性和style; 该样式在 1rem 的基础值上添加了字体大小。
2、重写meta标签,根据dpr设置设备的缩放比例。