CSS3--物理与逻辑像素

川长思鸟来 2024-04-18 16:48 102阅读 0赞

# CSS3–物理与逻辑像素 #

##### 工程师尺寸就是*逻辑像素*，设计师尺寸就是*物理像素* #####

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等。  
关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、vw、vh等。

## 一、 vw、vh新单位 ##

vw和vh是css3中的新单位，是一种视窗单位，在移动端中也同样适用。

*  **窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw**
 *  **窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh**
 *  **vmin：vw和vh中较小的那个**（开发一般不用，简单了解即可）
 *  **vmax：vw和vh中较大的那个**（开发一般不用，简单了解即可）

PS：现在开发移动端页面主要有两种方法vw与vh、rem两种。rem方式经常结合js做移动端自适应页面适配

## 二、屏幕尺寸 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190910093553616.png]  
例：华为荣耀7：  
![在这里插入图片描述][20190909195822103.png]  
规格参数：  
![在这里插入图片描述][20190909200208226.png]  
图上写的是5英寸是计算方法：1英寸（inch）=2.54厘米（cm）  
**屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米**  
比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

> 如何计算手机尺寸？  
> 知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。

## 三、物理像素–UI设计师像素 ##

**物理像素/屏幕分辨率/物理分辨率：**

*  **屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。**
 *  **单位：px，即1px=1个像素点**
 *  **比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px\*1334px个物理像素**  
    PS：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的

> 移动端的设计图是几倍图？--------2倍  
> 二倍图：1个逻辑像素等于2个物理像素  
> 苹果6开发，设计师给的是2倍图，375逻辑像素，750设计师

## 四、逻辑像素–设备独立像素DIP ##

**逻辑像素/设备独立像素：**

*  **也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。**
 *  **这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)**

## 五、屏幕像素密度PPI ##

屏幕像素密度：每英寸屏幕所拥有的像素数，英文简称PPI，单位dpi。  
解析：

*  屏幕是由很多像素点组成的。平时说的分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点 组成的。每个点发出不同颜色的光，构成我们所看到的画面。
 *  而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，**iPhone 3gs**的屏幕像素是**320×480**，**iPhone 4s**的屏幕像素是**640×960**。刚好两倍，然而两款手机都是**3.5英寸**的。
 *  • 所以，这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。

## 六、设备像素比DPR ##

像素比DRP ：

*  物理像素与逻辑像素之间比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。
 *  设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。  
    ![在这里插入图片描述][20190910082717458.png]

## 七、视网膜显示屏Retina ##

Retina：

*  所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。简单理解为种新型高分辨率的显示标准。
 *  这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
    *在Retina屏上，DPR不再是1，而是大于1  
    比如2（iPhone 5 6 7 8）  
    或者3（iPhone 6 Plus等一系列Plus）*

> Viewport:  
> 1、 viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px*960px，而逻辑像素数为320*480px。因此，需要使用大约4个物理像素来显示一个CSS像素。  
> 2、也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。

## 八、物理像素与逻辑像素 ##

**CSS中的1px并不等于设备的1px**

*  在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
 *  但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。
 *  在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320\*480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
 *  后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640\*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的，需要使用大约4个物理像素来显示一个CSS像素

**实现真正的1物理像素**

*  当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
 *  • 屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置`<meta name="viewport" content="width=device-width, initial-scale=0.5">`

> 面试：iphone6—1px:2个物理像素----transform:scale(0.5) 。  
> **1px边框问题：**  
> 在苹果的带动下，Retina技术在移动设备上已经成了标配，所以前端攻城狮必须直面如下事实：想画个1px的下边框，没法像安卓或iOS的同时那样直接操纵物理像素点ui,这就是初级前端面试必考题之“1px边框问题”的由来。最推崇的方法还是利用CSS3的**transform: scale**，因为简单直接、适用性和兼容性好。即**transform: scale(0.5)**。

## 九、分辨率 ##

**分辨率简介：**

*  首先分辨率有电脑屏幕分辨率和图像分辨率，显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。
 *  由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。同样的，图片也是一样，分辨率最高，越是清晰。

**电脑屏幕分辨率：**

*  屏幕分辨率是指屏幕显示的分辨率。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，但尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，但尺寸比较小。
 *  显示分辨率就是屏幕上显示的像素个数，分辨率800×640的意思是水平方向含有像素数为800个，垂直方向像素数640个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
 *  主流屏幕分辨率~常见电脑屏幕分辨率 ：1920X1080 ,1366X768，1440X900，1600X900 ，1024 X 768  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

## 十、有效可视区域/安全区： ##

有效可视区域/安全区：

*  当下比较流行的屏幕分辨率有1024×768、1366×768、1280×800、1280×1024、1440×900、1600×900、1920×1080等。
 *  设计网页时要考虑好浏览器的分辨率，主流的浏览器有IE,谷歌，火狐，欧朋等。

> 什么叫浏览器的有效可视区域呢？  
> 通俗比如打开一个网页后，刨除浏览器的工具栏和侧边栏等，真正显示内容的地方

## 小结 ##

工程师尺寸就是逻辑像素，设计师尺寸就是物理像素  
![在这里插入图片描述][20190910094829185.png]  
![在这里插入图片描述][20190910094835487.png]  
![在这里插入图片描述][20190910094843642.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/75a1004e3edc4c039035e99af5b30dcd.png
[20190910093553616.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/80dd2c5cf9d94a6a9e41874b6dd50b2c.png
[20190909195822103.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9c13c2ae908d41bf8e34b5178aeb66ab.png
[20190909200208226.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3b71d1a08e074f3faa76c00b0b7aefb9.png
[20190910082717458.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c43fd682021b43a48349f8753655bfee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bc0ad8b93fb84d6893e80b2b42aff6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/607f2bdd7fc341f38c634ecdbbc025ab.png
[20190910094829185.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb6d4e2e1b4542fca4c778560d829855.png
[20190910094835487.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ef46cadc7e484db09d66fdd3fad7c1c1.png
[20190910094843642.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8159747efd3d4545b863ee6359dcacac.png