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下，歡迎一塊兒交流，咱們一塊兒進步~~~