为什么苹果的retina屏（retinascreen）看起来这么酷？由于它的分辨率极高，可以达到肉眼几乎看不见的地步。例如，一个1像素的点在普通屏幕上将由1像素的网格表示，但在视网膜屏幕上则不然。iPhone5/6/7/8等机型会使用4像素网格（2x2矩阵，即DPR为2），iPhone6/7/8Plus等机型使用9像素网格（3x3矩阵，即DPR为3），让每个像素清晰2倍和3倍，所以看起来没有颗粒感。正因为如此，CSS代码border-bottom:1pxsolid#000;在视网膜屏幕上渲染时，1像素的底部边框将变为2像素或3像素。如何解决增厚问题？我们知道1px是css长度单位中最小的单位，所以不能用0.5px或者0.33px来解决（因为0.1px~0.9px统一渲染为1px），下面介绍解决方法。/*1。定义两个类：.border-top-1px,.border-bot-1px，用在需要设置上下边框的标签上*/.border-top-1px,.border-bot-1px{position:relative;}/*使用两个伪元素定义边框*/.border-top-1px:before{display:block;位置：绝对；左：0；顶部：0；宽度：100%；border-top:1pxsolid#000;内容：'';}.border-bot-1px:after{显示：块；位置：绝对；左：0；底部：0；宽度：100%；border-bottom:1pxsolid#000;内容：'';}/*2。通过css的@media:min-device-pixel-ratio查询设备的屏幕像素比，然后根据这个值确定压缩比*//*如果是1.5倍屏幕，则垂直压缩0.66666倍*/@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.border-top-1px:before,.border-bot-1px:after{-webkit-变换：scaleY(0.66666)；变换：scaleY(0.66666)；}}/*如果是2倍屏，垂直压缩0.5倍*/@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-top-1px:before,.border-bot-1px:after{-webkit-transform:scaleY(0.5);变换：scaleY（0.5）；}}/*如果是3倍屏，垂直压缩0.333333倍*/@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){.border-top-1px:before,.border-bot-1px:after{-webkit-transform:scaleY(0.33333);变换：scaleY(0.33333)；}}使用方法：在div的class属性中声明
