为什么移动端会产生1px问题啊?重点是如何产生的而不是如何解决

Question

为什么移动端会产生1px问题啊?
1.编辑器里写1px,苹果2倍屏渲染成2px。
2.不过最后不还是把2px塞到1px宽的逻辑点里吗?
3.那样最后用户看不还是1px吗，为什么会说苹果1px看起来会宽??
4.如上所说根本不会产生1px问题啊，如果真给写成1px了，那苹果手机上看岂不是都是0.5px了？岂不是更窄了？

Answer 1

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)就好了。

Answer 2

设备像素比造成的，参考张鑫旭大大的http://www.zhangxinxu.com/wor...

Answer 3

屏幕基本单位是一个点 1个点PC端表示1px 而移动端2个点表示1px 所以移动端比pc端看起来粗

Answer 4

设备像素比为1的设备中的1个像素点，对应于设备像素比为2的设备中的4个像素点

Answer 5

为什么2px 不会有问题。偏偏1px有问题呢

Answer 6

搞清楚物理像素和css像素的概念