前端开发中像素的概念

darcrand 发布于2019-08-29 12:24 / 3165人阅读

摘要：前端开发中像素的概念最近在公司实习第一次正式接触到设计师的设计稿我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。

前端开发中像素的概念

最近在公司实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误，欢迎大家指正~

何为像素

我们看到所显示在屏幕上的图像,实际上都是由非常多的像素点所组成。各个像素点通过发出不同颜色的光来呈现屏幕的色彩。

下面介绍一些和像素相关的概念

设备像素(物理像素)

它是物理上的概念，随着设备生产出来就已经被确定了。例如iPhone5的分辨率是640x1136px,代表屏幕由640行,1136列像素点组成。

小知识:屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)

CSS像素

CSS像素是web编程的概念,是相对的而不是绝对的单位，因为平常电脑屏幕1px对应了1px物理像素，所以感觉不到两者的区别，会让你误以为CSS里的1px就是实际屏幕像素

事实上只有zoom 100%的情况下,1个CSS像素才会等于1个设备像素

设备像素（深蓝色背景）和CSS像素（半透明前景）

当用户进行缩小操作的时候:可以看到,一个设备像素覆盖了多个CSS像素

当用户进行放大操作的时候:可以看到一个CSS像素覆盖了多个设备像素

小结:用户的缩放比会影响单位CSS像素点对应的实际物理像素的多少,看到这里，你就应该知道，CSS像素只是一个相对单位，与物理像素并不总是等价的

此像素非彼像素

正如这篇文章的前端工程师需要明白的「像素」开头中的场景，这简直是跟我刚开始实习的时候场景一模一样。

阿树：哇靠，为啥你给的设计稿是640px宽，iPhone 5不是320px宽吗？？？

玉凤：A pixel is not a pixel is not a pixel, you know ?

事实上，他们都是对的，只是谈到的不是同一个“像素”。在上一章节中我们介绍了,CSS像素并不总等于物理像素。

我们知道,iPhone 3GS的屏幕和iPhone 4/4s都是3.5英寸的。过去iPhone 3GS的时候,和平时电脑屏幕一样,在缩放比为100%的情况下,1px CSS像素对应着1px物理像素。开发者在开发网页的时候只需要写上CSS像素width:320px,height:480px。但是面对同样屏幕尺寸的iPhone4/4s,分辨率提升到了640x960，整整比3GS的分辨率大了一倍。在相同的屏幕尺寸下塞入更多的像素点，这需要引入另一个重要的概念：

像素密度(PPI,Pixels Per Inch)

像素密度，准确的说是每平方英寸的面积上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。

看到这里可能你会困惑，如果像素密度提高了一倍的话，那么原本显示正常的网页岂不是变得非常的小？

比如在分辨率为320x480的iPhone 3GS上，要画一条1英寸的线条，假设需要163像素,即CSS像素设成 163 像素即可；但是在分辨率为 640×960 的 iPhone4/4s 上，163 个 CSS 像素所在手机表示实际长度只有 iPhone3GS 的一半，即 0.5 英寸。如果照这种方式显示，3GS 上刚刚好的效果，在 4/4s 上就会小到根本看不清了。

但是在现实中并没有发生这种情况,因为:

也就是说,为了避免因为分辨率成倍提高造成的问题(高分辨率屏看网页看不清楚),Retina屏幕将2x2的像素当做1个像素来使用。阅览网页的时候，iPhone 4/4S与3GS是一样的显示，但是画质却更加细腻了。

逻辑像素(dp,pt)

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt（point）与dp(device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。下面我们以iPhone为例

例如将4/4s的逻辑像素设定为320x480pt（实际像素:640x960px）,以物理屏幕左上角为原点,横向X轴320pt,纵向Y轴480pt。所以PPI越高，1pt的所覆盖的物理像素就越多。

设备像素比（DPR，Device Pixel Ratio）

之前我们已经介绍了物理像素与逻辑像素的概念,就可以很容易推导出设备像素比的公式了

DRP = 物理像素/dp或pt

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）

总结

1个CSS像素相当于多少个物理像素,取决于:

页面缩放比

屏幕密度

所以设计师给的是640px宽的设计稿是根据设备像素(device pixel,物理像素)为单位制作的设计稿;而前端工程师参照相关的设备像素比来进行换算

比如根据iPhone5出稿的设计稿的中有一个width:100px,height:200px的按钮
那么前端工程师在编码web页面时应该写width:50px,height:100px.

他们之间的换算比例是根据设备像素比来计算的

参考文章

前端工程师需要明白的「像素」

移动端尺寸基础知识

(全解析)屏幕尺寸，分辨率，像素，PPI之间到底什么关系？

前端：移动开发 - 像素、viewport

移动端适配方案(上)

云服务器 GPU云服务器前端绘制像素前端开发的步骤前端开发的网站 java的前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111869.html

高清屏概念解析与检测设备像素比的方法

摘要：高清屏概念解析和前端开发的关系高清屏概念解析高清屏概念的兴起主要是从乔帮主发布设备开始兴起。还好我们有一个叫设备像素比的东西来检测当前屏幕是不是属于高清屏幕。前言做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结...

王伟廷 2019-08-29 11:22 评论0 收藏0
前端：移动开发 - 像素、viewport

摘要：表示单位面积上的物理像素点数目。比如原本像素高的顶部导航栏，在屏上用了个像素的高度来显示。参考译此像素非彼像素译不是像素的像素不是像素移动前端开发之的深入理解移动端尺寸基础知识张鑫旭设备像素比简单介绍知识 CSS 像素、物理像素、PPI CSS 像素 CSS 像素是 Web 编程的概念，本质上是为我们 Web 开发者创建的一个抽象结构，是相对的而不是绝对的。物理像素物理像素是...

QLQ 2019-08-29 10:58 评论0 收藏0
像素，css像素，物理像素，设备独立像素，分辨率大乱斗

摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel）像素像素是图像显示的基本单位，同时...

LiveVideoStack 2019-08-30 15:54 评论0 收藏0
Web移动开发基本概念

摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...

vvpale 2019-08-19 17:36 评论0 收藏0