吃透移動端 1px

時間 2019-12-16

標籤吃透移動 1px 欄目無線简体版

原文原文鏈接

前言

最近在寫移動端 H5 應用，遇到一個值得記錄下來的點。如今從它的由來到實現，咱們來聊一下移動端 1px，說 1px 不夠準確，應該說成 1 物理像素。css

經過閱讀下面文章，你將會理解如下問題：html

問題

爲何有 1px 這個問題？
實現 1px 有哪些方法？這些方法分別有哪些優缺點？
開源項目中使用的哪些解決方案？
如何在項目中處理 1px 的相關問題？

由來

基本概念

首先，咱們要了解兩個概念，一個是像素（pixel）能夠簡寫爲px，另一個是設備像素比（DPR）git

像素 ：指在由一個數字序列表示的圖像中的一個最小單元，單位是 px，不可再次分割了。

設備像素比（DPR）: 設備像素比 = 設備像素 / 設備獨立像素。
複製代碼

下面我來簡單解釋下幾個概念github

CSS 像素 (虛擬像素)：指的是 CSS 樣式代碼中使用的邏輯像素，在 CSS 規範中，長度單位能夠分爲兩類，絕對單位以及相對單位。px 是一個相對單位，相對的是設備像素。
設備像素 (物理像素)：指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了，和屏幕尺寸大小有關。
設備獨立像素 (邏輯像素)：能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: CSS 像素)，這個點是沒有固定大小的，越小越清晰，而後由相關係統轉換爲物理像素。

也就是說，當邏輯像素是 1pt 時，在 DPR 爲 2 的設備上顯示爲 2px 的物理像素web

參考數據

各類類型的 iphone 手機屏幕設備的參數瀏覽器

注：這裏的縮放因子呢，就是 DRP 的值less

設計稿對比數據iphone

會有人好奇，爲何設計稿上顯示是 750x1334 呢，這是由於設計稿是顯示的物理像素佈局

而咱們 css 中的像素是邏輯像素應該爲 375x 667，在編寫代碼時要將自定義寬度設置成 375pxpost

那麼此時設計稿上的 1px 寬度實際表明的 css 參數應該是 0.5px 對應物理像素 1px，那麼怎麼實現這個物理像素爲 1px 呢

實踐

歸根結底有兩種方案，一種是利用 css 中的transfrom：scaleY(0.5)，另外一種是設置媒體查詢根據不一樣 DPR 縮放

解決方案一

原理

利用 css 的僞元素::after + transfrom 進行縮放

爲何用僞元素？ 由於僞元素::after或::before是獨立於當前元素，能夠單獨對其縮放而不影響元素自己的縮放

僞元素大多數瀏覽器默認單引號也可使用，和僞類同樣形式，並且單引號兼容性（ie）更好些

實現

<div class="cell border-1px"> cell <div>

<style> .cell { width: 100px; height: 100px; } <!--所有邊框--> .border-1px:after { content: ''; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #000; border-radius: 4px; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: top left; } <!--單邊框，以上邊框爲例--> .border-1px-top:before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid red; transform: scaleY(.5); transform-origin: left top; } </style>

複製代碼

解決方案二（升級方案一）

原理

使用 less 對公共代碼（方案一）封裝，同時增長媒體查詢分別對不一樣 DPR 的設備，進行不一樣的縮放

.border(
    @borderWidth: 1px; 
    @borderStyle: solid; 
    @borderColor: @lignt-gray-color; 
    @borderRadius: 0) {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 98%;
        height: 98%;
        top: 0;
        left: 0;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        box-sizing: border-box;
        pointer-events: none;
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        &:before {
            width: 200%;
            height: 200%;
            -webkit-transform: scale(.5);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.5) {
        &:before {
            width: 250%;
            height: 250%;
            -webkit-transform: scale(.4);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.75) {
        &:before {
            width: 275%;
            height: 275%;
            -webkit-transform: scale(1 / 2.75);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
        &:before {
            width: 300%;
            height: 300%;
            transform: scale(1 / 3);
            -webkit-transform: scale(1 / 3);
        }
    }
    .border-radius(@borderRadius);
    &:before {
        border-width: @borderWidth;
        border-style: @borderStyle;
        border-color: @borderColor;
    }
}

.border-all(
	@borderWidth: 1px; 
	@borderStyle: solid; 
	@borderColor: @lignt-gray-color; 
	@borderRadius: 0) {
    .border(@borderWidth; @borderStyle; @borderColor; @borderRadius);
}
複製代碼

其餘方案：

使用圖片：兼容性最好，靈活行最差，不能改變顏色、長度
使用 viewport 和 rem，js 動態改變 viewport 中 scale 縮放，缺點在於不適用於已有的項目，例如：使用 vh 和 vw 佈局的
```
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製代碼
```
使用 css 漸變linear-gradient或者box-shadow

上述 3 種方案均有致命缺陷暫不推薦使用

兼容性

最後看一下兼容性如何，主要是僞元素、transform:scale 和min-device-pixel-ratio 這幾個關鍵詞的兼容性

開源庫的解決方案

vant 組件庫

跳去 github 查看相關代碼

使用less寫的

.hairline-common() {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
}

.hairline(@color: @border-color) {
  .hairline-common();

  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid @color;
  transform: scale(0.5);
}
複製代碼

也是採用第一種解決方案

ant-design-mobile 組件庫

跳去 github 查看相關代碼

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
  content: '';
  position: absolute;
  background-color: @color;
  display: block;
  z-index: 1;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'top') {
  border-top: 1PX solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-top: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);
        width: 100%;
        height: 1PX;
        transform-origin: 50% 50%;
        transform: scaleY(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'right') {
  border-right: 1PX solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-right: none;

      &::after {
        .scale-hairline-common(@color, 0, 0, auto, auto);
        width: 1PX;
        height: 100%;
        background: @color;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}
.hairline(@direction, @color: @border-color-base) when (@direction = 'bottom') {
  border-bottom: 1PX solid @color;
  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-bottom: none;
      &::after {
        .scale-hairline-common(@color, auto, auto, 0, 0);
        width: 100%;
        height: 1PX;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);
        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'left') {
  border-left: 1PX solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-left: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);
        width: 1PX;
        height: 100%;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base, @radius: 0) when (@direction = 'all') {
  border: 1PX solid @color;
  border-radius: @radius;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      position: relative;
      border: none;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1PX solid @color;
        border-radius: @radius * 2;
        transform-origin: 0 0;
        transform: scale(0.5);
        box-sizing: border-box;
        pointer-events: none;

        // @media (min-resolution: 3dppx) {
        // width: 300%;
        // height: 300%;
        // border-radius: @radius * 3;
        // transform: scale(0.33);
        // }
      }
    }
  }
}
複製代碼