1px線變粗的原因

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

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

(1)物理像素(physical pixel)

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

(2)設(shè)備獨(dú)立像素(density-independent pixel)

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

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

設(shè)備像素比（簡稱dpr）定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按如下的公式的得到：

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

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

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

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

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

1px線變粗的解決方法

偽類 + scale

這種方法的原理就是把原來元素的border去掉，然后用 :before 或者 :after 重做 border ，原先的元素相對(duì)定位，新做的 border 絕對(duì)，定位使用 transform 的 scale 把線條高度縮小一半，新邊框就相當(dāng)于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

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

//devicePixelRatio=2時(shí)，輸出meta如下

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

//devicePixelRatio=3時(shí)，輸出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 對(duì)陰影處理的方式實(shí)現(xiàn)0.5px的效果。代碼如下：

.box-shadow-1px {

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

}

使用border-image

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

p{

    border-width: 0 0 1px 0;

    border-image: imageUrl 2 0 round;

}

利用背景漸變linear-gradient

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

.bg_border {

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

    background-size: 100% 1px;

    background-repeat: no-repeat;

}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論