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下，欢迎一块儿交流，咱们一块儿进步~~~