html - CSS 中的像素与像素密度

Question

我对 HTML 和 CSS 非常陌生，我突然想到，当决定某个东西是 5px 时，因为像素的物理尺寸取决于密度，那么在 100 ppi 的屏幕上肯定 5px 看起来比在 300 ppi 的屏幕上更大ppi。

这是正确的吗？如果是的话，有什么办法可以调解吗？

Answer 1

绝对地！通常在桌面上，1 css 像素 = 1 像素。移动设备（尤其是带有较新的高分辨率显示器的）让我们有些头疼。这是我最喜欢的解决方法：

(function() {
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    var content = 'initial-scale=';
    content += 1 / window.devicePixelRatio;
    content += ',user-scalable=no';
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
})();

我通常将它添加为我的 body 标签的第一个子标签，但它可能应该在 head 标签中。此脚本根据显示器的像素密度修改设备的比例，并强制 1 CSS 像素等于 1 像素。

享受！

Answer 2

CSS 像素不是物理像素！96 CSS px ~= 1 物理英寸。参考https://www.w3.org/TR/css3-values/

Answer 3

您还可以使用@media查询，它允许您css对不同大小的屏幕使用不同的：

您可以了解更多CSS 技巧

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

另一个屏幕尺寸

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}