前端开发——从px到rem再到rpx的知识点简介和总结

一、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的关系