1px線變粗的原因

在做移動端項目時，常常是根據(jù)設計圖設置元素節(jié)點的大小和樣式，但是有時候根據(jù)設計圖寫出來的樣式還是不如人意，雖然表面上看起來和設計稿是一樣的，可是就是沒設計稿那種感覺，而且莫名還有一種山寨的氣息，UI審查的時候也常常會覺得分割線或則邊框線太粗了，要更細一點，但是一看代碼，已經是1px了，為什么看著還是那么粗呢？

要知道問題的原因首先要了解一下幾個概念：

(1)物理像素(physical pixel)

一個物理像素是顯示器（手機屏幕）上最小的物理顯示單元（像素顆粒），在操作系統(tǒng)的調度下，每一個設備像素都有自己的顏色值和亮度值。 如：iPhone6上就有750*1334個物理像素顆粒。

(2)設備獨立像素(density-independent pixel)

設備獨立像素（也叫密度無關像素），可以認為是計算機坐標系統(tǒng)中得一個點，這個點代表一個可以由程序使用的虛擬像素（比如：css像素），有時我們也說成是邏輯像素。然后由相關系統(tǒng)轉換為物理像素。所以說，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比。

(3)設備像素比(device pixel ratio )簡稱dpr

設備像素比（簡稱dpr）定義了物理像素和設備獨立像素的對應關系。它的值可以按如下的公式的得到：

設備像素比(dpr)=物理像素/邏輯像素(px) // 在某一方向上，x方向或者y方向，下圖dpr=2

知道了設備像素比，我們就大概知道了1px線變粗的原因。簡單來說就是手機屏幕分辨率越來越高了，同樣大小的一個手機，它的實際物理像素數(shù)更多了。因為不同的移動設備有不同的像素密度，所以我們所寫的1px在不同的移動設備上等于這個移動設備的1px?，F(xiàn)在做移動端開發(fā)時一般都要加上一句話：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這句話定義了本頁面的viewport的寬度為設備寬度，初始縮放值和最大縮放值都為1，并禁止了用戶縮放。

viewport的設置和屏幕物理分辨率是按比例而不是相同的，移動端window對象有個devicePixelRatio屬性，它表示設備物理像素和css像素的比例，在retina屏的iphone手機上，這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px。通過設置viewport，可以改變css中的1px用多少物理像素來渲染，設置了不同的viewport，當然1px的線條看起來粗細不一致。

1px線變粗的解決方法

偽類 + scale

這種方法的原理就是把原來元素的border去掉，然后用 :before 或者 :after 重做 border ，原先的元素相對定位，新做的 border 絕對，定位使用 transform 的 scale 把線條高度縮小一半，新邊框就相當于0.5px了。代碼如下：

.scale{

  position: relative;

  border:none;

}

.scale:after{

  content: '';

  position: absolute;

  bottom: 0;

  background: #000;

  width: 100%;

  height: 1px;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

使用flexible.js

前面已經說過1px變粗的原因就在于一刀切的設置viewport寬度，如果能把viewport寬度設置為實際的設備物理寬度，css里的1px不就等于實際1px長了么。 flexible.js的原理就是這樣，先獲取設備縮放比devicePixelRatio，然后根據(jù)縮放比來動態(tài)設定viewport的值，這樣導致的結果就是無論是哪個設備，1px所表示的永遠是1個設備像素，即該設備的最小像素。

//devicePixelRatio=2時，輸出meta如下

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//devicePixelRatio=3時，輸出meta如下

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

使用meta viewport控制

原理如上。代碼如下：

//1px像素線條

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5像素線條

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

使用box-shadow模擬邊框

利用css 對陰影處理的方式實現(xiàn)0.5px的效果。代碼如下：

.box-shadow-1px {

  box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

使用border-image

首先需要自己制作一個0.5像素的線條作為線條背景圖片。。代碼如下：

p{

    border-width: 0 0 1px 0;

    border-image: imageUrl 2 0 round;

}

利用背景漸變linear-gradient

利用linear-gradient利用背景圖片漸變，從有色到透明，默認方向從上到下，從0deg到50%的地方顏色是邊框顏色，然后下邊一半顏色就是透明了。然后設置背景寬度100%，高度是1px，再去掉repeat，所以有顏色的就是0.5px的邊框。代碼如下：

.bg_border {

    background-image: linear-gradient(0deg,black 50%,transparent 50%);

    background-size: 100% 1px;

    background-repeat: no-repeat;

}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

最新評論