1像素下边框引发移动端设备像素比的应用

实现1像素下边框，一般的处理方式为：border-bottom: 1px solid color, 这种的处理方式在PC端显示的是1px的下边框，然而放在移动端时就不是1px的大小了，可以能是2px，也可能是1.5px等等，出现这种状况的原因是不同的移动设备的min-device-pixel-ratio的值不一样，以iphone8为例，其min-device-pixel-ratio的值为2，如果某元素的下边框的写法是：border-bottom: 1px solid color，即当PC端显示的是1px的下边框时，在iphone6中显示的就不是1px，而是2px(如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客)。

<p>先看看效果图</p>

<p>从上面的效果就可以看到差别，直接border-bottom: 1px solid color，用手机浏览并不是1px，下面讲讲怎么实现移动端1像素下边框，先介绍下device-pixel-ratio的相关知识</p>

device-pixel-ratio介绍

<p>
先说说一个比较关键的一个技术：retina，一种新型高分辨率的显示技术，是苹果公司提出来的，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，目前大部分设备都用到了这种技术。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏(device-pixel-ratio > 1)
</p>

定义

<p>
device-pixel-ratio = physical pixel / device-independent pixels(某一方向，横轴或纵轴),即所谓的设备像素比指的是物理像素与设备独立像素的比例

物理像素：我们说的分辨率，例如iphone8的分辨率750x1334px

独立像素：设备的实际视窗，例如iphone8的视窗375x667px

iphone8的device-pixel-ratio = 750 / 375 = 2
</p>

常见设备device-pixel-ratio值

1. ios设备

<p>
无视网膜显示屏设备的device-pixel-ratio值为1，有视网膜显示屏设备的的device-pixel-ratio值为2
</p>

1. Android设备

<p>
无视网膜显示屏设备的device-pixel-ratio值为1,有视网膜显示屏设备的的device-pixel-ratio值为1.5或者为3(普遍设备像素比为这2个值)
</p>

移动端实现1像素下边框的方法

1. Media Queries媒体查询

demo

<style>
        .container {
            width: 100%;
            height: 30px;
            position: relative;
            background-color: yellow;
        }
        .container:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-top: 1px solid red;
        }
        @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
            .container::after {
                -webkit-transform: scaleY(0.7);
                transform: scaleY(0.7);
            }
        }
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
            .container::after {
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        }
        
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
            .container::after {
                -webkit-transform: scaleY(0.33);
                transform: scaleY(0.33);
            }
        }
    </style>
    <div class="container">
        移动端实现1像素下边框
    </div>

1. rem布局实现

这里就不介绍rem的实现方法了，如果对rem布局不是很清楚的小伙伴，可以看看我写的另一篇文章，详细的介绍了rem的相关用法。

写在最后

<p>
用Media Queries媒体查询实现移动端1像素下边框，同样也可以实现移动端调用高清背景图，不同的设置使用的图片的大小不一，用这个方法同样也是可以实现的。
</p>

最后，附上博文地址github地址如果觉得有用的话希望star下，欢迎一起交流，我们一起进步~~~