CSS：如何解决1px问题（*****五颗星）

1.关于1px 问题

1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。

原因很简单——CSS 中的 1px 并不能和移动设备上的 1px划等号。它们之间的比例关系有一个专门的属性来描述：

window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

<script>
		//window.devicePixelRatio = 设备的物理像素 / CSS像素。
        console.log(window.devicePixelRatio)//1,chromeweb网页结果
    </script>

测试其他设备：

打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone12 pro这系列的机型，输出的结果就是3：

这就意味着设置的 1px CSS 像素，在这个设备上实际会用3个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。

2.解决1px 问题的三种思路：

思路一：直接写 0.5px

如果之前 1px 的样式这样写：

border:1px solid #333

可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果（这里用 JSX 语法做示范）（JSX(JavaScript XML)是js内定义的一套XML语法，可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议，有由浏览器解析，而JSX是由js解析。）：

<div id="container" data-device={{window.devicePixelRatio}}></div>
    

然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况，比如说这里尝试命中 devicePixelRatio 为2的情况：

#container[data-device="2"] {
  border:0.5px solid #333
}

直接把