像素是屏幕顯示最小的單位捉邢，在一個1080p的屏幕上，它的像素數(shù)量是1920 * 1080宠进，即橫邊有1920個像素藐翎，而豎邊為1080個。
像素本身有大小,如果一個像素越小阱高，那么在同樣大小的屏幕上，需要的像素點(diǎn)就越多吼旧，像素就越密集圈暗，如果一英寸有435個像素裕膀，那么它的dpi/ppi就達(dá)到了435。Macbook Pro 15寸的分辨率為2880 x 1800昼扛，15寸是指屏幕的對角線為15寸（具體為15.4），根據(jù)長寬比換算一下得到橫邊為13寸渺鹦，所以ppi為2880 / 13 = 220 ppi. 像素越密集即ppi(pixel per inch)越高毅厚，那么屏幕看起來就越細(xì)膩越高清浦箱。
在Mac/Windows上可以設(shè)置屏幕顯示的分辨率，Mac默認(rèn)為設(shè)備分辨率的一半酷窥，它的dpr = 2，即長和寬用2個像素表示1個像素板乙，所以2880個物理像素點(diǎn)實(shí)際上只表示1440個邏輯像素募逞。那么我們的問題來了，怎么在高清屏上畫一條0.5px的邊呢放接？0.5px相當(dāng)于高清屏物理像素的1px。這樣的目的是在高清屏上看起來會更細(xì)一點(diǎn)玛瘸，效果會更好一點(diǎn)苟蹈，例如更細(xì)的分隔線慧脱。
直接設(shè)置0.5px
如果我們直接設(shè)置0.5px，在不同的瀏覽器會有不同的表現(xiàn)菱鸥，使用如下代碼：
<!DOCType html>
<html>
<head>
<meta charset="utf-8">
<style>
.hr {
width: 300px;
background-color: #000;
}
.hr.half-px {
height: 0.5px;
}
.hr.one-px {
height: 1px;
}
</style>
</head>
<body>
<p>0.5px</p>
<div class="hr half-px"></div>
<p>1px</p>
<div class="hr one-px"></div>
</body>
</html>
其中Chrome把0.5px四舍五入變成了1px殷绍，而firefox/safari能夠畫出半個像素的邊鹊漠，并且Chrome會把小于0.5px的當(dāng)成0，而Firefox會把不小于0.55px當(dāng)成1px镰烧，Safari是把不小于0.75px當(dāng)成1px楞陷，進(jìn)一步在手機(jī)上觀察IOS的Chrome會畫出0.5px的邊固蛾，而安卓(5.0)原生瀏覽器是不行的度陆。所以直接設(shè)置0.5px不同瀏覽器的差異比較大，并且我們看到不同系統(tǒng)的不同瀏覽器對小數(shù)點(diǎn)的px有不同的處理懂傀。所以如果我們把單位設(shè)置成小數(shù)的px包括寬高等，其實(shí)不太可靠郑兴，因?yàn)椴煌瑸g覽器表現(xiàn)不一樣。
使用scale縮放
<style>
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>
我們發(fā)現(xiàn)Chrome/Safari都變虛了情连，只有Firefox比較完美看起來是實(shí)的而且還很細(xì)览效，效果和直接設(shè)置0.5px一樣锤灿。所以通過transform: scale會導(dǎo)致Chrome變虛了，而粗細(xì)幾乎沒有變化但校。但是如果加上transform-origin: 50% 100%：
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
chrome現(xiàn)在的效果如下
線性漸變linear-gradient
<style>
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
</style>
<p>linear-gradient(0deg, #fff, #000)</p>
<div class="hr gradient"></div>
inear-gradient(0deg, #fff, #000)的意思是：漸變的角度從下往上州刽，從白色#fff漸變到黑色#000浪箭，而且是線性的，在高清屏上匹表，1px的邏輯像素代表的物理（設(shè)備）像素有2px宣鄙，由于是線性漸變，所以第1個px只能是#fff冻晤，而剩下的那個像素只能是#000，這樣就達(dá)到了畫一半的目的鼻弧。
boxshadow
<style>
.hr.boxshadow {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>
<div class="hr boxshadow"></div>
viewport
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
其中width=device-width表示將viewport視窗的寬度調(diào)整為設(shè)備的寬度攘轩，這個寬度通常是指物理上寬度。默認(rèn)的縮放比例為1時歼捏，如iphone 6豎屏的寬度為750px，它的dpr=2瓣履，用2px表示1px寂诱，這樣設(shè)置之后viewport的寬度就變成375px痰洒。但是我們可以改成0.5，viewport的寬度就是原本的750px脯宿，所以1個px還是1px，正常畫就行连霉，但這樣也意味著UI需要按2倍圖的出跺撼，整體面面的單位都會放大一倍。
