retina屏幕1个物理像素边框的实现

问题就出现了，retina屏幕会用2个（甚至3个）物理像素来显示一个css像素（1px），所以在css中指定一个1px的border实际上占用了2个以上物理像素，视网膜屏幕上的用户体验不佳。几种解决方案（考虑1px=2dip）使用0.5px的问题：仅Firefox和Safari8+支持，Android不支持。Useanimage使用图片作为边框：border-width:1px;border-image:url(border.gif)2重复；border-img属性会将图像（如上图）切割成九个网格，并将它们放置在border的四个边和四个角上。由于图片的外边缘一半是纯色，一半是透明的，1px的图片边框实际显示的是0.5px的边框。问题：无法设置颜色边框。实际上，它占用了1px的空间。如果不使用base64，需要多加载一张图片。使用类似于上图的渐变原理，将1px的渐变拆分为两半，一半透明，一半纯色，但好处是实际上不会占用方框0.5px的空间作为背景。背景：线性渐变（180deg，黑色，黑色50%，透明50%）左上/100%1px不重复，线性渐变（90deg，黑色，黑色50%，透明50%）右上/1px100%不重复，线性渐变（0，黑色，黑色50%，透明50%）右下/100%1px不重复，线性渐变（-90deg，黑色，黑色50%，透明50%）左下/1px100%无重复；问题：无法处理圆角使用缩放到原始元素两倍大小的伪元素，指定1px边框，将其缩小一半得到0.5px边框。.retina-border-scale{位置：相对；}.retina-border-scale:before{内容:'';边框：1px纯黑色；变换：比例（0.5）；变换原点：00；宽度：200%；高度：200%；位置：绝对；左：0；顶部：0；问题：原始元素需要相对于元素定位。会有阴影直接按照放大后的设计稿重建，然后指定viewport的initial-scale=0.5来缩小整个页面：简单粗暴兼容非retina屏，因为non-retina下1个物理像素的border-retina屏幕可以直接以px为单位，所以不同屏幕会有多套样式实现。要想正确应用样式，首先要有视网膜屏幕的判断能力。其中，CSS媒体查询提供min-device-pixel-ratio或min-resolution；并且浏览器还提供了window.devicePixelRatiojsAPI来获取CSS像素与物理像素的比例。最后，我们就可以根据屏幕在代码中应用合适的样式了。refCSS、Retina和物理像素