CSS 像素:
div.sidebar {
width: 300px;
}
css-pixel-width = device-pixel-width x 1 / Device-pixel-ratio
例如:比如说,设备像素为 1920(w) X 960(h) 且 dpr = 2。
css-width = 1920 * (1 css px/2 device px) = 960 px
设备像素:
@media all and (max-device-width: 320px) {
....
}
缩放系数:
当缩放系数恰好为 100% 时,一个 CSS 像素等于一个设备像素(尽管即将到来的中间层将取代此处的设备像素。)下图对此进行了描述。这里没什么可看的,因为一个 CSS 像素正好与一个设备像素重叠。
我可能应该警告您“缩放 100%”在 Web 开发中意义不大。缩放级别对我们来说并不重要;我们需要知道的是当前有多少 CSS 像素适合屏幕。下面两张图片说明了当用户缩放时会发生什么。当用户缩小时,第一个显示设备像素(深蓝色背景)和 CSS 像素(半透明前景)。 CSS 像素变小了;一个设备像素与多个 CSS 像素重叠。第二张图片显示了用户放大时的设备和 CSS 像素。一个 CSS 像素现在与多个设备像素重叠。
问题:
1) 如何管理缩放级别?元标记的auto-scale
属性是否决定缩放级别?
视口(viewport):是区域(以 CSS 像素为单位)
Wrt 视口(viewport)像素,
initial-scale
设置 CSS 像素 和视口(viewport)像素 之间的关系,如前所述 here .例如:initial-scale = 1
表示 1 个 CSS 像素等于 1 个视口(viewport)像素。
问题:
2) 什么是视口(viewport)像素?
最佳答案
听起来好像回答者在回答链接问题时当场编造了那个词。他们的回答(在我编辑之前)完全由 block 引用组成,这没有帮助,给人一种他们引用了显然定义了这些术语的外部来源的错误印象。
CSS 没有定义这样的术语,也没有任何其他规范。视口(viewport)元标记只是更改移动浏览器的缩放行为,对渲染没有任何有意义的影响。
关于html - 视口(viewport)像素与设备像素与 CSS 像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45957726/