AI漏洞挖掘系统维阵公测进行时

其中 Chrome 把 0.5px 四舍五入变成了 1px，而 firefox/safari 能够画出半个像素的边，并且 Chrome 会把小于 0.5px 的当成 0，而 Firefox 会把不小于 0.55px 当成 1px，Safari 是把不小于 0.75px 当成 1px，进一步在手机上观察 iOS 的 Chrome 会画出 0.5px 的边，而安卓(5.0)原生浏览器是不行的。所以直接设置 0.5px 不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的 px 有不同的处理。所以如果我们把单位设置成小数的 px 包括宽高等，其实不太可靠，因为不同浏览器表现不一样。

至于其他解决一像素边框问题网上有一堆答案，在这里我推荐一种非常好用，并且没有副作用的解决方案。

transform: scale(0.5) 方案


 

乔布斯在 iPhone4 的发布会上首次提出了 Retina Display(视网膜屏幕)的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大，但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值。

1.2.5 设备像素比

设备像素比 device pixel ratio 简称 dpr，即物理像素和设备独立像素的比值。为什么要知道设备像素比呢?因为这个像素比会产生一个非常经典的问题，1 像素边框的问题。

1px 边框问题

当我们 css 里写的 1px 的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比(dpr)去映射到设备上就为 2px，或者 3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同(记得上面的知识点吗，设备的像素大小是不固定的)，这样如果在尺寸比较大的设备上，1px 渲染出来的样子相当的粗矿，这就是经典的一像素边框问题。

如何解决

核心思路，就是在 web 中，浏览器为我们提供了 window.devicePixelRatio 来帮助我们获取 dpr。在 css 中，可以使用媒体查询 min-device-pixel-ratio，区分 dpr：我们根据这个像素比，来算出他对应应该有的大小，但是暴露个非常大的兼容问题。


 

上图可以清楚的看到，不同分辨率所带来的的差距

从最初的颗粒感相当大的屏幕，到 720p 再到 1080p，甚至于现在各家旗舰手机的 2k 屏幕，我们的物理分辨率在变得原来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，其实你担忧的问题，我们的乔帮主在很多年前就想到了。这就是我们的逻辑分辨率

1.2.4 逻辑分辨率(设备独立像素)

如下图所示，虽然设备物理分辨不同，但是他的这个逻辑分辨率却都差不多，这就要感谢乔帮主了。

（编辑：揭阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!