移動 web 1px 邊框解決方案

時間 2019-11-15

標籤移動 web 1px 邊框解決方案欄目無線简体版

原文原文鏈接

在移動端web頁面開發中，爲了使css中使用的尺寸與設計稿一致，一般會採用 rem 單位配合 lib-flexible 來實現移動端的適配，在IOS設備上 flexible.js 會根據設備的分辨率動態的調整 viewport 的 width 和 scale 來達到目的。javascript

可是，如今不少的安卓手機也是高分辨率的屏幕，有些1px邊框的按鈕和列表會顯得特別粗，flexible.js 只處理了IOS的手機，因此安卓手機須要咱們本身處理。css

JS處理

首先，能夠經過 window.devicePixelRatio 拿到設備的像素比，而後給 html 標籤加上的相應的樣式。html

function retina () { // 高分辨率屏幕處理
    if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS會縮放，不處理
    var classNames = [];
    var pixelRatio = window.devicePixelRatio || 1;
    classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
    if (pixelRatio >= 2) {
        classNames.push('retina');
    }

    var html = document.getElementsByTagName('html')[0];

    classNames.forEach(function (className) {
        html.classList.add(className);
    });
}複製代碼

這樣一來咱們能夠經過, html.pixel-ratio-2 給不一樣分辨率的屏幕加上特殊的樣式處理。java

單個邊的1px方案

因爲andorid不能設置0.5px像素的邊框，因此須要經過僞元素來模擬邊框，先使僞元素的高度爲1px，而後使用transform: scale(.5)縮小相應的大小便可。具體實現代碼以下：git

.item {
    position: relative;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 1;
        html.pixel-ratio-2 & {
          .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
          .transform(scaleX(0.33));
        }
    }
}複製代碼

而後不一樣方向的邊框，只須要跳轉僞元素的位置和縮放位置便可。該實現方案來自Framework7github

邊框按鈕的1px方案

除了當個方向的邊框外，還有一種全邊框的按鈕，若是不作處理會顯得特別粗，可是僞元素只有 before 和 after 顯然剛纔的單邊的方案不能用，因此只能採用其餘方案。web

固然仍是利用僞元素畫邊框而後經過縮小，達到邊框變細的目的。首先咱們使用僞元素畫四條邊，在將寬高調整到200%,最後再縮小50%，因爲邊框是1px不會因寬高的改變而改變，因此咱們縮小時邊框也會跟着變細。less

.block-line {
    position: relative;
    border: 1px solid #000;  // 正常狀況下
    html.pixel-ratio-2 & {
        border-color: rgba(0, 0, 0, 0);
        &:before {
            content: "";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            transform: scale(0.5);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
        }
    }

    html.pixel-ratio-3 & {
        border-color: rgba(0, 0, 0, 0);
        &:before {
            content: "";
            width: 300%;
            height: 300%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            transform: scale(0.33);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
        }
    }
}複製代碼