1px问题

2019-05-20-10:17：于公司

为了适配各种屏幕，有的设备上1px会看起来大于1px，被多个物理像素渲染，看起来很粗

解决方案有：

1、border-image

基于media查询判断不同设备像素比给定不同 border-image：

.border_1px{
  border-bottom: 1px solid #000;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
  .border_1px{
    border-bottom: none;
    border-width: 0 0 1px 0;
    border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
  }
}

2、background-image

3、伪类 + transform

基于 media查询判断不同的设备像素比对线条进行缩放(scale)!

4、 svg

border-image和 background-image 都可以模拟 1px边框，但是使用的都是位图，还需要外部引入。

借助 PostCSS 的 postcss-write-svg 我们能直接使用 border-image 和 background-image创建 svg 的 1px边框：

5、设置viewport

通过设置缩放，让 CSS像素等于真正的物理像素
比如：当设备像素比为 3时，我们将页面缩放 1/3 倍，这时 1px 等于一个真正的屏幕像素。

const scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector('meta[name="viewport"]');

if (!viewport) {
  viewport = document.createElement("meta");
  viewport.setAttribute("name", "viewport");
  window.document.head.appendChild(viewport);
}
viewport.setAttribute(
  "content",
  "width=device-width,user-scalable=no,initial-scale=" +
    scale +
    ",maximum-scale=" +
    scale +
    ",minimum-scale=" +
    scale
);