页面布局的单位们(px,em,rem,dpr)

看到有人的代码里用rem,然后就很好奇。
px 前端最基础的单位是像素,它比较能够理解,是代码最小的分辨率单位。
em 是定义字体大小的,浏览器默认1em=16px,当然你可以自定义。然后你就可以单位换算了,比如1.4em = 16 * 1.4px,em的换算比是父亲节点的换算比。
rem 继承根元素<html>的换算比,这样比em稳定
16px的换算表

emTable.png

支持的浏览器
Mozilla Firefox 3.6+Apple Safari 5+Google ChromeIE9+Opera11+

关于dpr,移动端的布局很多涉及到了dpr,这里涉及到了像素密度的问题,主要针对移动端吧。
dpr的的全称是device pixel ratio = physical pixel/density-independent pixel
在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr

device-width
表示手机的分辨率宽度,而并非手机物理像素宽度。iPhone4在垂直状态下物理像素宽度为640,这里的device-width
代表的则应该是它的dip像素320px。

参考资料:
[1]CSS3的REM设置字体大小
[2]How to size text using ems
[3]移动端H5页面高清多屏适配方案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容