一像素邊框如何處理(移動端)

時間 2019-11-30

標籤像素邊框如何處理移動欄目無線简体版

原文原文鏈接

因爲分辨率的差別，高清手機屏上的 1px其實是由 2×2 個像素點來渲染，有的屏幕如iPhone6s plus甚至用到了 3×3 個像素點html

因此 border: 1px 在移動端會渲染爲 2px 的邊框甚至3px的邊框web

雖然用戶在實際使用的時候，很難發現這 1px 的差別，可是設計師每每會在這 1px 上較勁，這就產生了經典的「一像素問題」app

這裏先對比一下不一樣方法作出來的邊框效果如何 : spa

很明顯能夠看到最後一個邊框比前面的兩個邊框都細,可是這種辦法的邊框並非真正的 border，而是高度或者寬度爲 1px 的塊狀模型，重點是這種辦法不能作出圓角，通常都用來畫分割線或者單個邊框scala

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <title>一像素問題</title>
        <style>
            * {
                margin: 0;
                }
            html {
                font-size: 20px;
            }
            .wrap {
                padding: 1rem;
            }
            .wrap div {
                margin: 1rem;
            }
            .wrapper1 {
                border: 1px solid #000000;
            }
            .wrapper2 {
                border: 0.05rem solid #000000;
            }
            .wrapper3{
                position: relative;
                border-top: none !important;
            }
            .wrapper3::after {
                content: " ";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: #000;
                -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
            }
            /* 2倍屏 */
            @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
                .wrapper3::after {
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                }
            }
            /* 3倍屏 */
            @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
                .wrapper3::after {
                    -webkit-transform: scaleY(0.33);
                    transform: scaleY(0.33);
                }
            }
        </style>
    </head>
<body>
    <div class="wrap">
        <div class="wrapper1">
            這裏是直接設置1px邊框
        </div>
        <div class="wrapper2">
            這裏是直接設置0.05rem邊框
        </div>
        <div class="wrapper3">
            經過僞類建立邊框,而後經過媒體查詢來適配
        </div>
    </div>
</body>
</html>

還有一種方法就是經過 js 獲取到設備像素比，而後動態添加 <meta> 標籤( 網頁的內容都渲染在 viewport 上，因此設備像素比的差別，直接影響的也是 viewport 的大小 ):設計

   (function() {
       var scale = 1.0;
       if (window.devicePixelRatio === 2) {
           scale *= 0.5;
       }
       if (window.devicePixelRatio === 3) {
           scale *= 0.333333;
       }
       var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
       document.write(text);       
    })();


這種方法多用於媒體查詢,也就是在設置頁面的時候分2倍圖或者3倍圖來作(這樣的話全部內容都要根據像素比來設置切圖)


最後看到一個沒試過的方法,就是設置border-width:thin;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。