css处理retina屏1像素边框变粗的问题

苹果的retina屏幕（视网膜屏幕）为什么看起来那么爽？由于它的分辨率极高，可以达到眼睛几乎看不出来的地步。举个例子，一个1像素的点，普通屏幕会用1个像素格去表示，而retina屏幕则不是，iPhone5/6/7/8等机型会用4个像素格（2×2的矩阵，即DPR为2），iPhone6/7/8 Plus等机型则是用9个像素格（3×3的矩阵，即DPR为3），这样每个像素都清晰了2倍3倍，所以看起来就没有颗粒感了。

image

<figcaption>普通屏与retina屏比照</figcaption>

正由于如此，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属性中公告

<div class="border-bot-1px">文字内容</div>

查看演示请狠狠地点击（iPhone、Mac或者DPR>1的安卓手机才能看出效果）：retina屏1像素边框与普通边框比照demo

image

<figcaption>手机效果截图</figcaption>

假如你在使用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);}

<div class="border-bot-1px-f00">我有一条红色底部边框</div><div class="border-bot-1px-0f0">我有一条绿色底部边框</div><div class="border-bot-1px-00f">我有一条蓝色底部边框</div>