1px線變粗的原因
在做移動端項目時捌斧，常常是根據(jù)設(shè)計圖設(shè)置元素節(jié)點的大小和樣式，但是有時候根據(jù)設(shè)計圖寫出來的樣式還是不如人意，雖然表面上看起來和設(shè)計稿是一樣的，可是就是沒設(shè)計稿那種感覺捎稚，而且莫名還有一種山寨的氣息，UI審查的時候也常常會覺得分割線或則邊框線太粗了求橄，要更細一點今野，但是一看代碼，已經(jīng)是1px了罐农，為什么看著還是那么粗呢条霜？
要知道問題的原因首先要了解一下幾個概念：
(1)物理像素(physical pixel)
一個物理像素是顯示器（手機屏幕）上最小的物理顯示單元（像素顆粒），在操作系統(tǒng)的調(diào)度下涵亏，每一個設(shè)備像素都有自己的顏色值和亮度值宰睡。 如：iPhone6上就有750*1334個物理像素顆粒。
(2)設(shè)備獨立像素(density-independent pixel)
設(shè)備獨立像素（也叫密度無關(guān)像素）气筋，可以認為是計算機坐標系統(tǒng)中得一個點夹厌，這個點代表一個可以由程序使用的虛擬像素（比如：css像素），有時我們也說成是邏輯像素裆悄。然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。所以說臂聋，物理像素和設(shè)備獨立像素之間存在著一定的對應(yīng)關(guān)系光稼，這就是接下來要說的設(shè)備像素比。
(3)設(shè)備像素比(device pixel ratio )簡稱dpr
設(shè)備像素比（簡稱dpr）定義了物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系孩等。它的值可以按如下的公式的得到：
設(shè)備像素比(dpr)=物理像素/邏輯像素(px) // 在某一方向上艾君，x方向或者y方向，下圖dpr=2
知道了設(shè)備像素比肄方，我們就大概知道了1px線變粗的原因冰垄。簡單來說就是手機屏幕分辨率越來越高了，同樣大小的一個手機权她，它的實際物理像素數(shù)更多了虹茶。因為不同的移動設(shè)備有不同的像素密度，所以我們所寫的1px在不同的移動設(shè)備上等于這個移動設(shè)備的1px∮缫現(xiàn)在做移動端開發(fā)時一般都要加上一句話：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了本頁面的viewport的寬度為設(shè)備寬度蝴罪，初始縮放值和最大縮放值都為1，并禁止了用戶縮放步清。
viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的要门，移動端window對象有個devicePixelRatio屬性虏肾，它表示設(shè)備物理像素和css像素的比例，在retina屏的iphone手機上欢搜，這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px封豪。通過設(shè)置viewport，可以改變css中的1px用多少物理像素來渲染炒瘟，設(shè)置了不同的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
前面已經(jīng)說過1px變粗的原因就在于一刀切的設(shè)置viewport寬度涨缚，如果能把viewport寬度設(shè)置為實際的設(shè)備物理寬度脓魏，css里的1px不就等于實際1px長了么。 flexible.js的原理就是這樣拄丰，先獲取設(shè)備縮放比devicePixelRatio奄侠，然后根據(jù)縮放比來動態(tài)設(shè)定viewport的值闷盔，這樣導(dǎo)致的結(jié)果就是無論是哪個設(shè)備牡整，1px所表示的永遠是1個設(shè)備像素迫摔，即該設(shè)備的最小像素沪摄。
//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%的地方顏色是邊框顏色切厘，然后下邊一半顏色就是透明了。然后設(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;
}
