1 像素问题

怎样处理 移动端 1px 被 渲染成 2px 问题

• meta 标签中的 viewport 属性 ，initial-scale 设置为 1
• rem 按照设计稿标准走，外加利用 transform 的 scale(0.5) 缩小一倍即可； 2 全局处理
• meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5
• rem 按照设计稿标准走即可

解释

UI 设计师设计的时候，画的 1px（真实像素）实际上是 0.5px(css) 的线或者边框。但是他不这么认为， 他认为他画的就是 1px 的线，因为他画的稿的尺寸本身就是屏幕尺寸的 2 倍。假设手机视网膜屏的宽度是 320x480 宽，但实际尺寸是 640x960 宽，设计师设计图的时候一定是按照 640x960 设计的。但是前端工程师写代码的时候，所有 css 都是按照 320x480 写的，写 1px(css)，浏览器自动变成 2px（真实像素）。

那么前端工程师为什么不能直接写 0.5px(css) 呢？因为在老版本的系统里写 0.5px(css) 的话，会被浏览器解读为 0px(css)，就没有边框了。所以只能写成 1px(css)，实际在屏幕上显示出来就是设计师画的1px（真实像素）的 2 倍那么宽，所以设计师会觉得这个线太粗了，和他的设计稿不一样。在新版的系统里，已经开始逐渐支持 0.5px(css) 这种写法。所以如果设计师在大图上设计了一个 1px（真实像素）的线的话，前端工程师直接除以 2，写 0.5px(css) 就好了。

**另外一种解释 ** 事实就是它并没有变粗，就是 css 单位中的 1px，对于 dpr 为 2 的设备，它实际能显示的最小值是 0.5px。 设计师口中说的 1px 是针对设备物理像素的，换算成 css 像素就是 0.5px。 一句话总结，background:1px solid black 在任何屏幕上都是一样粗的，但是 retina 屏可以显示比这更细的边框，然后设计师就不乐意了，让你改。