CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
CSS像素、物理像素、设备像素、设备像素比(DPR)、PPI(Pixel Per Inch)和Viewport是与网页设计和开发中的屏幕显示有关的概念。
- CSS像素：CSS中的逻辑像素，用于定义尺寸。例如，
width: 100px;表示元素宽度为100个CSS像素。 - 物理像素：显示屏幕上的最小光线点，是屏幕显示的最小单位。
- 设备像素：手机或其他移动设备上的一个像素，通常与物理像素相同。但是，对于高PPI的设备，可能有多个物理像素对应一个设备像素。
- 设备像素比(DPR)：设备像素和CSS像素的比例。可以通过
window.devicePixelRatio获取。 - PPI(Pixel Per Inch)：每英寸像素数，用于衡量屏幕的清晰度。
- Viewport：用户网页的可视区域。可以通过
<meta name="viewport" content="width=device-width, initial-scale=1.0">设置使网页的宽度默认与设备宽度一致，不进行缩放。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px; /* CSS像素 */
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代码中，div的宽度为100CSS像素，不管在什么设备上查看，div的视觉尺寸大致相同。通过设置viewport，可以确保在不同设备上网页的显示尺寸适配设备屏幕。
评论已关闭