Question

有一项任务，即使设备像素化，也可以使块的边界宽度为1个物理像素。

项目使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

因此，border: 1px solid black;在不同的设备上具有不同的边框宽度，具体取决于pixel像素。我需要避免它，并使边框宽度为1个物理像素。

Answer 1

在纯CSS中对此进行近似的一种方法是使用基于分辨率的媒体查询。

＆＃13;

div {
  margin:.5em 0;
  border:1px solid red;
}
@media (min-resolution: 2dppx) {
  div.devicedot {border-width:.5px;}
}
@media (min-resolution: 3dppx) {
  div.devicedot {border-width:.34px;}
}
@media (min-resolution: 4dppx) {
  div.devicedot {border-width:.25px;}
}
@media (min-resolution: 6dppx) {
  div.devicedot {border-width:.17px;}
}

＆＃13;

<div class="normal">This is normal</div>
<div class="devicedot">This is with a device dot</div>

＆＃13;

当然实际查询取决于您的需求：如果您想在1200dpi打印机上打印，则必须包含12dppx的查询。（如果你真的可以使用0.02毫米宽的线，那就是。）

请注意，假设浏览器具有完整的@media支持，此示例已经过简化。如果您在任何人都可以访问的实际网站上使用此功能，请添加@media all and ...

等安全措施

边框宽度为1个物理像素

1 个答案: