视口像素 vs 设备像素 vs CSS 像素

2024-03-21

CSS 像素:

div.sidebar {
    width: 300px;
}

css 像素宽度 = 设备像素宽度 x 1 / 设备像素比率

例如:假设设备像素为 1920(w) X 960(h),dpr = 2。

css 宽度 = 1920 * (1 css px / 2 设备 px) = 960 px


设备像素:

@media all and (max-device-width: 320px) {
      ....    
}

缩放系数:

当缩放系数恰好为 100% 时,1 个 CSS 像素等于 1 个设备像素(尽管即将到来的中间层将取代此处的设备像素。)下图描述了这一点。这里没什么可看的,因为一个 CSS 像素与一个设备像素完全重叠。

我可能应该警告你“缩放 100%”在 Web 开发中没有什么意义。缩放级别对我们来说并不重要;我们需要知道的是当前有多少 CSS 像素适合屏幕。下面的两张图片说明了用户缩放时会发生什么。第一个显示用户缩小时的设备像素(深蓝色背景)和 CSS 像素(半透明前景)。 CSS像素变小了;一个设备像素与多个 CSS 像素重叠。第二张图片显示用户放大时的设备和 CSS 像素。一个 CSS 像素现在与多个设备像素重叠。

问题:

1)如何管理缩放级别?做auto-scale元标签的属性决定缩放级别?


视口:面积(以 CSS 像素为单位)

Wrt 视口像素,

initial-scale设置之间的关系CSS像素 and 视口像素, 如上所述here https://stackoverflow.com/a/22778172/3317808。例如:initial-scale = 1平均 1 个 CSS 像素等于 1 个视口像素。


问题:

2)什么是视口像素?


听起来像是回答者在回答链接问题时当场编造了这个术语。他们的答案(在我编辑之前)完全由块引号组成,这并没有帮助,给人一种错误的印象,认为他们引用了显然定义了这些术语的外部来源。

CSS 没有定义这样的术语,任何其他规范也没有定义。视口元标记只是更改移动浏览器的缩放行为,对渲染没有任何有意义的影响。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

视口像素 vs 设备像素 vs CSS 像素 的相关文章