css解决retina屏1像素边框变粗的问题

苹果的retina屏幕（视网膜屏幕）为什么看起来那么爽？因为它的分辨率极高，可以达到眼睛几乎看不出来的地步。举个例子，一个1像素的点，普通屏幕会用1个像素格去表示，而retina屏幕则不是，iPhone5/6/7/8等机型会用4个像素格（2x2的矩阵，即DPR为2），iPhone6/7/8 Plus等机型则是用9个像素格（3x3的矩阵，即DPR为3），这样每个像素都清晰了2倍3倍，所以看起来就没有颗粒感了。 普通屏与retina屏对比 正因为如此，1像素底部边框的css代码border-bottom: 1px solid #000;渲染在视网膜屏幕上就会变成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; position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid #000; content: ''; } .border-bot-1px:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid #000; content: ''; } /*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-transform: scaleY(0.66666); transform: 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); transform: 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); transform: scaleY(0.33333); } } 使用方法：在div的class属性中声明 查看演示请狠狠地点击（iPhone、Mac或DPR>1的安卓手机才能看出效果）：retina屏1像素边框与普通边框对比demo 手机效果截图 如果你在使用sass、less等css预处理器，可以把边框颜色设置成参数变量，在使用的时候动态传入颜色。 @mixin border-top-1px($color) { position: relative; &::before { display: block; position: absolute; top: 0; left: 0; width: 100%; border-top: 1px solid $color; content: ''; } } @mixin border-bot-1px($color) { position: relative; &::after { display: block; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid $color; content: ''; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { .border-top-1px::before, .border-bot-1px::after { -webkit-transform: scaleY(.66666); transform: scaleY(.66666); } } @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .border-top-1px::before, .border-bot-1px::after { -webkit-transform: scaleY(.5); transform: scaleY(.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) { .border-top-1px::before, .border-bot-1px::after { -webkit-transform: scaleY(.33333); transform: scaleY(.33333); } } 使用方法：在公共样式如main.css中定义所需颜色的类，div标签里使用这些类 .border-bot-1px-f00 { @include border-bot-1px(#f00); } .border-bot-1px-0f0 { @include border-bot-1px(#0f0); } .border-bot-1px-00f { @include border-bot-1px(#00f); }

本文章由javascript技术分享原创和收集