像數(shù)
為影像顯示的基本單位。 https://www.wikiwand.com/zh-sg/%E5%83%8F%E7%B4%A0
CSS像素(CSS pixels)
瀏覽器使用的抽象單位，用來精確度量網(wǎng)頁上的內(nèi)容。 eg：平時經(jīng)常寫的width:100px;height:100px; 都是與設備無關(guān)的。
設備獨立像素 (device - independent-pixels)
也可以稱為設備無關(guān)的邏輯像素
meta里面設置width=device-width，這個device-width就是設備獨立像素 。
在chrome里 看到的
375*667 320*480等等都是設備獨立像素，它們在數(shù)值上與css數(shù)值是相等的
設備像素(device pixels )
也稱為物理像素，是顯示屏的最小物理單位，每一像素都包含自己的顏色、亮度。像素是沒有大小的、是一個抽象概念、是一個相對單位。
Device Pixel Ratio，設備像素比。
window.devicePixelRatio。 一般情況下： DPR = DP / DIP
以我手上的 pro6 為例：
window.devicePixelRatio // 3
screen.width, screen.height // 320 640
官網(wǎng)分辨率: 1920 x 1080
關(guān)于像素
有一個常見的錯誤理解：認為像素是一個寬高相等的小方塊，并且的像素都是“那么大”，但是不知道這個寬高的具體數(shù)字。分辨率：泛指量測或顯示系統(tǒng)對細節(jié)的分辨能力。以PC屏幕，手機屏幕為例，分辨率1920*1080 是指屏幕縱向能顯示1920個像素，橫向能顯示1080個像素 描述分辨率的單位有：dpi（點每英寸）、lpi（線每英寸）和ppi（像素 每英寸）。從技術(shù)角度說，“像素”只存在于電腦、手機顯示領域，而“點”只出現(xiàn)于打印或印刷領域。
ppi（ pixel per inch）
顯示器的每英寸像素值，首先要確定屏幕的尺寸和分辨率。
以尺寸為4.7英寸、分辨率為1334*750的iphone6為例
邏輯像素(dp,pt)
為了抹去高密度分辨率屏幕(高清屏)所帶來的適配問題,iOS與Android兩個平臺分別提出了pt（point）與dp(device-independent pixel)兩個單位。他們的名稱不一樣，但是內(nèi)涵是一樣的。
視網(wǎng)膜屏
視網(wǎng)膜（Retina）屏幕是喬布斯的一個營銷術(shù)語。
Viewport
layout viewport 和 visual viewport。
Layout viewport - 渲染視圖，渲染頁面所需要的尺寸
Visual viewport - 視覺視圖，瀏覽器可視區(qū)域尺寸
CSS 的多種單位
參考
- https://www.paintcodeapp.com/news/iphone-6-screens-demystified
- https://www.zhihu.com/question/32011095
- http://screensiz.es/
0.5px 的問題
首先自己確實對移動端不熟啊，很多東西都沒有認真研究過。那么下面說下 0.5px 的問題吧，網(wǎng)上文章太多，質(zhì)量良莠不齊。其實 0.5px 這個問題準確來說是講得 1px 的問題。
在熟悉了上面說的 設備像素和設備獨立像素后 來理解這個 1px 的問題就迎刃而解了。那么這個問題到底說的是什么呢？
喬布斯提出了 視網(wǎng)膜屏 這個概念，其實算是個營銷術(shù)語吧。其實對于 ppi 高于 300 的屏幕都可以說成是視網(wǎng)膜屏。就目前大多數(shù)手機而言， ppi 都很高， DPR 都是 >2 的。 那么就變成了多個物理像素來顯示一個邏輯像素。這就是大家說的 1px 變成了 2px 的問題。其實這里有個錯誤，應該是 1像素 成了 2像素， 因為這個指的是 物理像素。而邏輯像素上 1px 就是 1px ，并沒有變大。
那么我們現(xiàn)在需要 1個物理像素的border， 并且需要考慮圓角。
rem + viewport
// 美團為例： http://i.meituan.com/
// 正常情況：
<meta name="viewport" content="initial-scale=1, user-scalable=no">
html {
font-size: 50px;
}
// 高 DPR：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
html {
font-size: 100px;
}
baidu google 都是 initial-scale=1 , 即使是大網(wǎng)站，都有不同的設置和理解。
這個方法，也是目前我覺得最好的，沒有明顯的兼容性問題，完全不用考慮圓角等，而使用其他 hack 手段。
Box-shadow
效果還不錯
<div class="example--box-shadow"></div>
<div class="example--box-shadow-round"></div>
<div class="example--box-shadow-2"></div>
.example--box-shadow {
box-shadow: 0 0.5px 0 #000;
}
.example--box-shadow-2 {
box-shadow: 0 0.1px 0 #000;
}
.example--box-shadow-round {
width: 200px;
height: 100px;
margin-left: 100px;
border-radius: 10px;
box-shadow: 0 0 0 0.5px #000;
}
iOS8 +
JS判斷UA，是否是ios8+，是的話則輸出類名hairlines，為了防止重繪，這段代碼加在head里即可。
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version = parseInt(v[1], 10);
if(version >= 8){
document.documentElement.classList.add('hairlines')
}
}
是否支持0.5px邊框
JS判斷是否支持0.5px邊框，是的話，則輸出類名hairlines。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
radio 的媒體查詢
這個用于圖片等一些處理還不錯，畢竟 0.5 不是誰都有的（2333）
.css{
background-image: url(img_1x.png); // 普通顯示屏(設備像素比例小于等于1.3)使用1倍的圖
border: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{
background-image: url(img_2x.png); // 高清顯示屏(設備像素比例大于等于1.5)使用2倍圖
border: 0.5px;
}
}
其余
這幾個方法效果比較差，就不多說了。
- transform: scale(0.5)
- linear-gradient(to bottom, #000 0%, #000 51%, transparent 51%)
- 圖片
參考：
