前端开发中像素的概念最近在公司实习，也是第一次正式接触设计师的设计稿。相信很多刚接触移动端设计开发的同学，基本都会在前端开发，而电脑中的像素问题纠结了很久，所以写下这篇笔记，以备日后参考。如有理解错误，欢迎指正~什么是像素？我们看到的显示在屏幕上的图像实际上是由很多像素组成的。每个像素通过发出不同颜色的光来呈现屏幕的颜色。下面介绍一些与像素相关的概念。器件像素（physicalpixel）是一个物理概念，在器件生产时就已经确定。例如iPhone5的分辨率是640x1136px，也就是说屏幕由640行1136列像素组成。Tips：屏幕一般采用RGB色域（由红、绿、蓝三个子像素组成），而印刷行业一般采用CMYK色域（青、品红、黄、黑）。CSS像素CSS像素是网络编程的概念。相对而不是绝对单位，因为普通电脑屏幕上的1px对应的是1px物理像素，所以你感受不到两者的区别，这会让你误以为CSS中的1px就是实际的屏幕像素，但实际上只是缩放100%，1个CSS像素等于1个设备像素设备像素（深蓝色背景）和CSS像素（半透明前景）当用户缩小时：可以看到当用户缩小时一个设备像素覆盖了多个CSS像素放大时：可以看到一个CSS像素覆盖了多个设备像素一个相对单位，并不总是等同于一个物理像素。这个像素不是那个像素。就像本文前端工程师需要了解的“像素”一开始的场景，与我刚开始实习时的场景如出一辙。阿树：哇，为什么你给的设计稿是640px的宽度，而iPhone5的宽度不是320px？？？于峰：一个像素不是一个像素不是一个像素，你知道吗？其实他们都对，只是说的不是同一个“像素”。在上一章中，我们介绍过CSS像素并不总是等于物理像素。我们知道iPhone3GS和iPhone4/4s的屏幕都是3.5英寸。以往的iPhone3GS，就像通常的电脑屏幕一样，缩放比例为100%时，1px的CSS像素对应1px的物理像素。开发者在开发网页时只需要写上CSSpixelswidth:320px,height:480px。但是面对同样屏幕尺寸的iPhone4/4s，分辨率提升到了640x960，正好是3GS分辨率的两倍。在相同的屏幕尺寸下插入更多的像素需要引入另一个重要的概念：像素密度（PPI，PixelsPerInch）像素密度，准确的说是每平方英寸面积上排列的像素数量。1英寸是等于2.54厘米的固定长度。像素密度越高，屏幕显示效果越精细。看到这里你可能会一头雾水。如果像素密度增加一倍，原来显示的网页岂不是变小了？例如在分辨率为320x480的iPhone3GS上，如果要画一条1英寸的线，假设需要163像素，即可以将CSS像素设置为163像素；但在分辨率为640×960、163像素的iPhone4/4s上，CSS像素所在手机的实际长度只有iPhone3GS的一半，即0.5英寸。如果这样显示的话，刚好在3GS上的效果就太小了，在4/4s上看不清楚。但实际上，这并不会发生，因为：也就是说，为了避免分辨率翻倍带来的问题（高分辨率屏幕看不清网页），Retina屏幕将2x2像素视为1个像素来使用.在浏览网页时，iPhone4/4S和3GS的显示效果相同，但画质更加细腻。逻辑像素(dp,pt)为了消除高密度分辨率屏幕（高清屏幕）带来的适配问题，iOS和Android两个平台分别提出了pt（point）和dp（device-independentpixel）单元。他们的名字不同，但内涵是一样的。我们以iPhone为例。例如，将4/4s的逻辑像素设置为320x480pt（实际像素：640x960px），以物理屏幕的左上角为原点，水平X轴为320pt，垂直Y轴为480pt。所以PPI越高，1pt覆盖的物理像素就越多。设备像素比（DPR，DevicePixelRatio）我们之前介绍过物理像素和逻辑像素的概念，我们很容易推导出设备像素比的公式DRP=物理像素/dp或者pt1倍：1pt=1dp=1px（iPhone3GS）2次：1pt=1dp=2px（iPhone4s/5/6）3次：1pt=1dp=3px（iPhone6plus）总结1个CSS像素相当于多少个物理像素，取决于：页面scaling对比屏幕密度，设计师给出的设计稿是640px宽。设计稿以设备像素（devicepixel，physicalpixel）为单位制作；前端工程师参考相关设备像素比进行转换。比如设计稿是基于iPhone5的，稿子中有一个width:100px,height:200px的按钮，那么前端工程师在写网页的时候应该写width:50px,height:100px。它们之间的转换比例是根据设备像素比计算的。参考前端工程师需要了解的屏幕尺寸、分辨率、像素、PPI之间的关系是什么？前端：移动开发-pixel、viewport移动端适配解决方案（上）
