物理像素，逻辑像素(pt)，css像素(px)，像素比(dpr)都是什么？px，em，rem等 都是什么？有什么区别？

逻辑像素、物理像素、css像素、像素密度、像素比都是什么？

（像素）分辨率：手机屏幕的实际像素尺寸。

像素密度(ppi —— 像素 每英寸 (ps: dpi —— 点每英寸,一般针对于打印机等）)：(pixels per inch ) 每英寸的长度上排列的像素点数量 （注：这里的像素， 指的是device pixels），是屏幕分辨率的单位。（这项指标是连接数字世界与物理世界的桥梁），1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。  （比如 iphone4 的屏幕尺寸是3.5，像素分辨率是 960 * 640px ， 则 。

物理像素：设备屏幕实际拥有的像素点。一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。像素是没有大小的、是一个抽象概念、是一个相对单位。。

逻辑像素(pt)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素（逻辑像素也叫“设备独立像素”（Device Independent Pixel,DPI）可以理解为反映在CSS里的像素点，也就是说CSS像素是逻辑像素的一种。）meta里面设置width=device-width，这个device-width就是设备独立像素。在chrome里 看到的375*667 320*480等等都是设备独立像素，它们在数值上与css数值是相等的。

css像素：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel) 。(浏览器使用的抽象单位(逻辑像素的一种)， 主要用来在网页上绘制内容。)

像素比dpr：物理像素与逻辑像素之间的比例，dpr => 物理像素:逻辑像素。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素（长2倍，宽2倍，乘起来就是4倍）显示1个逻辑像素。一个逻辑像素等于多少个物理像素是由设备本身决定的（不要试图自己去计算这个值！！！！），可以通过DPR也就是设备像素比window.devicePixelRatio获知。

---

找了很多文档发现，很多文章说 px 是物理像素，pt 是逻辑像素，就很懵😵............. 所以找到了下面的解释：

• pt: html css中的使用的单位像素px: 实际上指的是逻辑像素pt

• px: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点, 大小固定

• 一个pt可以包含多个物理像素px
  在iphone6中一个单位的逻辑像素包含2个物理像素
  iphone的分辨率为375*667 实际上指的是逻辑像素为375*667, 所以一般移动端的设计图纸一般是给的是750*1334, 是因为一个逻辑像素pt包含两个物理像素px

• 不同设备下的分辨率不同, 在iphone6s中 一个逻辑像素pt包含三个物理像素px 即 1pt = 3px

原文链接：https://www.jianshu.com/p/e5e09f133bba

---

px、em、rem 是什么？区别有哪些？

px: 固定的像素，无法因为适应屏幕大小而改变。

em 和 rem ：是相对的长度单位，长度不是固定的，更适用于响应式布局。

em 和 rem 的区别：em 是相对父元素的单位， rem 是相对根元素的，rem 中的 r 是 root (根源)，这样就更容易理解了。

em:

• 子元素中设置的字体大小是相对于父元素的。
• 元素的 width / height / padding / margin 用em的话，是相对于该元素的 font-size。

例：

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

巩固测验：你能说出孙元素span的font-size和width吗？

答案：我猜你会说10px、100px，哈哈，其实逻辑上是正确的，但是如果你是chrome浏览器我不得不告诉你应该是12px、120px。因为chrome设置的最小字体大小为12px，意思就是说低于12px的字体大小会被默认为12px，当然这一尬境可以由css3解决，这里就不多说了。

chrome默认的字体大小是12px，也就是1em默认为12px，如果最外层的父元素直接把font-size设为1.5em，那么该元素的字体大小为18px（12*1.5）。

rem：

• rem 全部的长度都是相对于根元素（html）的。通常给根元素(html) 设置一个font-size，然后其他元素的长度单位是 rem。

总结：

做项目的时候使用什么长度单位由具体需求决定

像素（px）：用于元素的边框或定位。

em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

vh: 占视窗高度的百分比

wh: 占视窗宽度的百分比

vmin: vh 和 vw 比较的最小值

vmax: vh 和 vw 比较的最大值

 

原文链接1

原文链接2