Question

我对HTML和CSS非常陌生，我刚想到，当决定某事物是5px时，由于像素的物理尺寸取决于密度，因此在100 ppi的屏幕上肯定5px看起来比在屏幕为300 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 Tricks

@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;
  }
}

CSS中的像素与像素密度

3 个答案: