css中的px em rem rpx，以及物理像素和逻辑像素的区别

前言
px,em,rem的解释是来自于

https://www.cnblogs.com/leejersey/p/3662612.html

px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
   也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

在做移动端适配是最常用的方法就是使用rem作为单位，因为rem是根据html的fontsize去动态计算实际的px的。
所以常常应用这点，做反向使用。即根据屏幕大小动态的设置fontsize.来达到不同的分辨率下有一样的效果。淘宝的自适应布局flexible.js原理就是如此。

分辨率

【分辨率】分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334.

物理像素和逻辑像素

从简书中找到的几个概念：

https://www.jianshu.com/p/e8b66de2b7b5

1. 实际工作中设计师常常给的是物理分辨率，程序中用到的是逻辑分辨率，但是都称为分辨率，容易混淆。
2. 【物理分辨率】是硬件所支持的分辨率，【逻辑分辨率】是软件可以达到的分辨率。
3. 物理分辨率和逻辑分辨率的商称为【像素倍率dpr】，也就是常说的几倍屏。

rpx
rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。那么1rem=750rpx/20=750/20rpx;

【微信中用rem】rem和em也相同，如果浏览器不特殊的设置body的font-size话,1rem=16px;如果设置body的font-size:62.5%;那么1rem=16px*62.5%=10px;

对于iPhone6的设计图750*1334来说，1rpx=0.5逻辑像素=1物理像素；因此要想要或许设计图中某一个块的宽度的话就让设计图的上测量的宽度除20就是这一块的rem值。因为根据上面的一段话，1rem=10px（逻辑像素）;测量的宽度除2是逻辑像素宽度，再除10就是rem值了。

那为什么用iPhone6的设计图就不用考率在iPhopne5上甚至其他设备上的样式大小呢，因为小程序会自己算，小程序会换算成自己想要的rem值，小程序怎么算呢。主要是根据比值来的，因为小程序规定屏幕宽度为750rpx,20rem。1rpx和1rem都是相对屏幕的分辨率的一个单位值，在iPhone6上1rpx=750px（设备像素）/750=1px(物理像素)，在iphone5中宽为640px(物理像素)，则1rpx=640px（设备像素）/750=0.84px(物理像素)，在不同的设备上1rpx代表的长度不同。但是在不同设备上根据同一个设计图测出来的宽度比例却相同。因而，不用考虑适配问题了。小程序自己就搞定了。

设备  rpx换算px (屏幕宽度/750)  px换算rpx (750/屏幕宽度)
iPhone5     1rpx = 0.42px       1px = 2.34rpx
iPhone6     1rpx = 0.5px        1px = 2rpx
iPhone6s    1rpx = 0.552px      1px = 1.81rpx

css是逻辑像素