摘要：像素概念一般而言，像素是图像的基本采样单位。我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。
小序
最近在做pc端、微信端、移动端app,公司的每个项目分别都有这三者，在pc端调试页面，像素显示都和预期效果的一样，可是，微信页面和手机页面却天差地别，在goole里调试得好好的，结果，真机看效果，用同事们的手机有不同的显示效果，于是，对于像素单位有了兴趣，近来，根据自己查到的资料，做一个总结。
像素(pixel)概念一般而言，pixel（像素）是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。
CSS像素(css pixel)CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
按照CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。
设备像素(device pixel):设备像素设是物理概念，指的是设备中使用的物理像素。
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
设备像素与CSS像素之间的换算一般来说，px就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。例如打印机输出到纸张上，其解析度比电脑屏幕要高许多，如果不缩放，直接使用设备的物理像素，那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。
所以，CSS规定，在这种情况下，浏览器应该对像素值进行缩放调节，以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。直接按照设备物理像素的大小进行换算当然是一个方式，但是CSS考虑得更多，它建议，转换应按照“参考像素”（reference pixel）来进行。
眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的，所谓一叶障目不见泰山，讲的就是这个常识。
因此CSS规范使用视角来定义“参考像素”，1 参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸，而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸，所以其视角可以计算出来是0.0213度。（即(1/96)in / (28in 2 PI / 360deg) ）
我们在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。
像素单位这里只分别列出一个常用的：
绝对(absolute)单位 pxpx单位名称为像素，像素（px）是相对于显示器屏幕分辨率而言的，而这种像素长度和你在显示器上看到的文字屏幕像素无关。
而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。
px实际上是一个按角度度量的单位。
1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值,起初排版度量时是基于当前字体大写字母”M”的尺寸的。
不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。
em指字体高，任意浏览器的默认字体高都是16px。所以,未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。
em有如下特点:
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。
em巧用：
中文文章中，一般段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：
p { text-indent: 2em; }
参考资料：
前端工程师需要明白的「像素」 文／阿树（简书作者）
像素（px）到底是个什么单位
CSS的长度单位
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115231.html
摘要：相对单位的值会根据外部影响因素的变化而变化。很自然，相对单位使用起来会比较困难。在本章中，我将揭开相对单位的神秘面纱。重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《W...
摘要：有的是日常生活中使用的单位，比如厘米和英寸有的是印刷行业使用的单位，比如和有的是专门为发明的单位，比如。但是，由于目前低端打印机的每英寸点数为，而高端屏幕的每英寸点数为，因此所谓的高分辨率可能介于两者之间。。 CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...
摘要：所以，在网页字体中，使用和单位是更好的解决方案。一般来说，我在开始写网页的时候，会设置标签的字体大小为这样标签就是百分比的单位，然后再网页接下来使用单位。 一、前言 在CSS样式中，当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中，你有4种不同的选择，能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢？这个问题引发了各种各样不同的争论和评价。想要...
摘要：前端开发中像素的概念最近在公司实习第一次正式接触到设计师的设计稿我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。 前端开发中像素的概念 最近在公司实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误...
摘要：像素像素是一个相对单位。相对不同屏幕，其实际像素大小不同。解决方案直接使用实现的终端适配有兴趣的小伙伴可以看下的解决方案使用实现手淘页面的终端适配地址移动端适配单位的坑你知道多少关于移动端布局的一些总结 网页尺寸单位 百分比（%） 英寸（in） 厘米（cm） 毫米（mm） 磅数（pt） 12 点活字（pc） 字母高度一半（ex） 父级字体（em） 像素（px） 根元素字体（rem） ...
阅读 1532·2023-04-26 02:50
阅读 3534·2023-04-26 00:28
阅读 1931·2023-04-25 15:18
阅读 3208·2021-11-24 10:31
阅读 985·2019-08-30 13:00
阅读 998·2019-08-29 15:19
阅读 1765·2019-08-29 13:09
阅读 2973·2019-08-29 13:06
