深入了解css像素

若简
997 阅读7分钟

相关概念

设备像素(DP)（物理像素）

我们可以这么理解，屏幕是由N多个小方块构成的，每个小方块都只能显示一个颜色，而一个小方块，就是一个物理像素。而在不同设备上，这个小格子的大小是不同的，所以物理像素并不是一个固定大小的单位，他只代表一个显示器上的小格子，格子到底多大，在显示器出厂前已经确定好了，单位pt。

image.png

设备独立像素DIP(Device independent Pixel)

设备独立像素，也称为逻辑像素，简称dip。

CSS像素 = 设备独立像素 = 逻辑像素

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性); 

在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

我们可以这么理解，物理像素是硬件开发相关的单位，是基于一个一个的硬件小方块，其大小由硬件厂家设定。而逻辑像素，则更像是软件开发相关的单位，软件相关的工作人员通过逻辑像素来表达软件相关的尺寸。前端css代码、浏览器显示给开发者的尺寸、UI设计师给出的UI稿，其尺寸单位都是逻辑像素。

设备像素比DPR

image.png

DPR = 设备像素/CSS像素

获得设备像素比（dpr）后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

通过js获取当前的像素比：

window.devicePixelRatio

image.png

对于同一个元素，DPR 越大，渲染时需要的物理像素就越多。

缩放

在页面进行缩放操作也会 引起css中px的变化
缩放效果：
=100%： image.png

<100%： image.png

>100%： image.png

上层为css像素，底层为设备像素

缩放改变的是CSS像素的大小，放大时CSS像素增大，则一个CSS像素可以跨越更多的设备像素，视觉视口会变小。什么？放大反而视觉视口变小？没错，这是因为视觉视口也是通过CSS像素度量，而放大就是使CSS像素放大，假设屏幕上本来需要200个CSS像素才能占满屏幕，由于放大，现在只需要100个CSS像素就能占满，所以视觉视口的宽就变成100px。

PPI(pixels per inch)

每英寸(长度)所包含的像素点数目。

1英寸(in) === 2.54厘米(cm)

image.png

以iphone6为例：

image.png

326 === Math.sqrt(1334 * 1334 + 750 * 750) / 4.7

ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

DPR 和 PPI 呈正相关

DPI：

每英寸(长度)所包含点的数目。

当用于描述显示器时，可以把ppi和dpi认为是同一概念

分辨率

像素点总数即为分辨率

物理分辨率

物理像素点的总数即为物理分辨率

image.png

逻辑分辨率

逻辑像素点的总数即为逻辑分辨率

// iPhone6
window.screen.width; // 375px;
window.screen.height; // 667px;

iPhone 常见的几种规格 image.png

viewport

浏览器的视口是一个在其中查看 Web 内容的窗口区域。

简单来说：viewport 是屏幕背后的一张画布。

浏览器会先把页面内容绘制到画布上，然后再通过屏幕窗口呈现出来。

分类

1、布局视口（layout viewport）

浏览器默认的viewport： 浏览器用来计算CSS布局的区域

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。 image.png

image.png

通过document.documentElement.clientWidth 来获取。

2、视觉视口（visual viewport）

浏览器可视区域的viewport：指用户通过设备屏幕看到的区域，可以通过缩放来改变视觉视口的大小

image.png

通过window.innerWidth 来获取

3、理想视口（ideal viewport）

移动设备的理想viewport：开发者希望用户设备显示网页的最佳区域

所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport

但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

device-width 指屏幕可视窗口在水平方向上的逻辑像素。

width 指的是画布的宽度，device-width 是可视窗口宽度。

width=device-width 就是把画布的宽度设置为可视窗口的宽度，让画布上的内容完全呈现出来。

width与initial-scale都会初始化布局视口，但浏览器会取其最大值。

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，为什么要两个都一起写呢？因为有的浏览器只设置其中一个，不能保证理想视口的尺寸能随着屏幕的旋转而正确改变，所以两个一起写只是为了解决兼容性问题。

总结

通常，我们把画布称为layout viewport, 把屏幕可视窗口称为visual viewport。

而把设置 width=device-width 的画布称为ideal viewport，即“理想视口”。

image.png

我们通常在 html 中设置 viewport 就是为了得到理想视口，方便用户阅览。

认识 Meta viewport

meta viewport的设置格式是 <meta name="viewport" content="name=value,name=value" ，其中name的值可设为：

  1. width：将布局视口设置为固定的值，比如375px或者device-width（设备宽度）
  2. initial-scale：设置页面的初始缩放
  3. minimum-scale：设置最小的缩小程度
  4. maximum-scale：设置最大的放大程度
  5. user-scalable：设置为no时禁用缩放

image.png

移动端适配

1. 手淘Flexible（rem）

核心思路是检测设备的DPR和屏幕宽度，动态修改根标签html的font-size样式的大小，用rem单位来做适配。

flexible的做法是将设计稿分为10份，每一份就是设计稿宽度的百分之十。我们知道，UI一般会选择一款设备作为设计基准。现在标准用的比较多的是ipone6。ipone6的屏幕宽度是375，dpr是2，为了适配retina屏，所以设计稿的宽度一般为750px。那么将750px分为10份，也就是10rem，750/10也就是75px;1rem=75px。那么我们在编码的时候，比如一图片在设计稿上的尺寸为100px，那么它的长度就应该为100/75rem。

2. vw/vh

3. 百分比

4. 响应式布局

body { 
    background-color: yellow; 
} 
/* 针对大屏产品 ipad pro */ 
@media screen and (min-width: 1024px) { 
    body { 
        background-color: blue; 
    } 
}

参考

github.com/jawil/blog/…
www.quirksmode.org/mobile/view…
juejin.cn/post/719072…
vue3js.cn/interview/c…
blog.csdn.net/qq_18376199…
segmentfault.com/a/119000001… blog.csdn.net/aron_H1/art… juejin.cn/post/695309… segmentfault.com/a/119000002…

avatar
文章
阅读
粉丝