一、px (pixel)
物理像素:
设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素。
逻辑像素:
也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。
具体参考文章:CSS中的px与物理像素、逻辑像素、1px边框问题
二、rem(font size of the root element)
rem是CSS3新增的相对长度单位,是指相对于根元素html的font-size计算值的大小,可理解为屏幕宽度的百分比。
营养疗效:
做web app的屏幕适配,因为不同手机型号的屏幕大小都不同,所以这时候我们就不能用px来做单位,rem是适配不同手机屏幕的一种方案。
食用方法:
利用rem相对于html根字体的大小,来计算相应元素的宽高:
1、一般将html的font-size设置为:20px或30px或50px或100px
2、利用浏览器默认大小(16px)也就是16px*62.5%=10px,这样就是html{font-size:62.5%;},而不是html{font-size:10px;}因为浏览器(PC)最小就是12px。这样一来1rem = 10px;
具体参考文章:rem与px的转换
三、em(font size of the element)
em是相对于父级字体大小的,使用场景较少。
致命弱点:
1、层层嵌套比较麻烦;
2、当我想改变其中一个div的字体大小时,整个布局可能乱套;
具体参考文章:px、em、rem区别介绍
四、rpx (responsive pixel)
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
搬运官网:
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议:
开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
其他参考文章:px、物理像素、rem、rpx的关系