一些基本概念
viewport 視窗
在桌面瀏覽器中，viewport就是瀏覽器窗口的寬度高度。但在移動端設(shè)備上，假如沒有viewport，移動端會采用桌面版的屏幕寬度，然后適應(yīng)屏幕進行縮放。設(shè)置viewport可以控制頁面的寬度并且在不同的設(shè)備上進行縮放。
（A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.）
移動端提供了兩個viewport，虛擬的viewport：visual viewport和布局的viewport：layout viewport。Stack Overflow上有深入的講解。
物理像素 & 設(shè)備獨立像素 & CSS像素
**物理像素 **又被稱為設(shè)備像素，他是顯示設(shè)備中一個最微小的物理部件。每個像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。
設(shè)備獨立像素也稱為密度無關(guān)像素，可以認為是計算機坐標(biāo)系統(tǒng)中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
CSS設(shè)置的像素值（px）屬于普通像素點，或者是標(biāo)準(zhǔn)像素點。CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內(nèi)容。一般情況之下，CSS像素稱為與設(shè)備無關(guān)的像素(device-independent pixel)，簡稱DIPs。
devicePixelRatio 設(shè)備像素比
設(shè)備像素比簡稱為dpr，其定義了物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系。它的值可以按下面的公式計算得到：
設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨立像素
高清屏和普通屏幕
高清屏和普通屏來做對比就是普通屏幕的1個像素點就是1個物理像素點，而高清屏的1個像素點是4個物理像素點。
通過計算 devicePixelRatio 的值，可以區(qū)分普通顯示屏和高清顯示器，當(dāng)devicePixelRatio值等于1時（也就是最小值），那么它是普通顯示屏，當(dāng)devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清顯示屏。
比如iPhone6的devicePixelRatio為2，所以是高清顯示屏。iPhone6s plus這種高清屏dpr是3。
REM
REM就是相對于根元素<html>的font-size來做計算。因為網(wǎng)頁<html>的默認字體大小是 16px，所以
1rem=16px ，10rem=160px
Retina屏幕1px產(chǎn)生的問題
因為viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的，<meta>標(biāo)簽里實際上是設(shè)置了ideal viewport的寬度，而不同手機的ideal viewport寬度是不一樣的。移動端window對象有devicePixelRatio屬性，CSS里寫1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px。
圖片來自Retina屏的移動設(shè)備如何實現(xiàn)真正1px的線？
如何實現(xiàn)Retina屏幕上1px的效果
方法一 Viewport + REM
通過viewport + REM的方式來兼容,（淘寶移動端的方法）使用JS動態(tài)獲取屏幕的設(shè)備像素比devicePixelRatio，然后動態(tài)設(shè)置viewport。
devicePixelRatio=2的時候，控制viewport的initial-scale值為0.5進行縮放
<meta name="viewport" content="initial-scale=0.5, user-scalable=no"/>
devicePixelRatio=3的時候，
<meta name="viewport" content="initial-scale=0.333333, user-scalable=no"/>
Android下不支持initial-scale，雖然這不適用于安卓, 但它里面的這一段代碼可以用來做對安卓機的部署.
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設(shè)備下（比如安卓），仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}```
對于安卓機做檢測，動態(tài)加載CSS
var link = document.createElement('link');
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
link.setAttribute("href",".......Android.css");
document.querySelector('head').appendChild(link);```
這個方案結(jié)合了viewport和rem，所以使用的時候要考慮到REM布局。另外，REM布局下字體的單位仍建議使用px，還有出現(xiàn)1px像素線的地方，也仍舊使用border-width:1px;而不是border-width:.1rem;
方法二 Media Query
根據(jù)屏幕的設(shè)備像素比來加載不同圖片可以使用CSS的Media Query來解決，它對應(yīng)devicePixelRatio有幾個查詢值-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio，但是這樣我們就要切圖片的一倍圖和二倍圖。
.img{ /* 普通顯示屏(設(shè)備像素比例小于等于1.3)使用一倍圖 */
background-image: url(img_1x.png);
}
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.img{/* 高清顯示屏(設(shè)備像素比例大于等于1.5)使用二倍圖 */
background-image: url(img_2x.png);
}
}
據(jù)說IOS8以上CSS可以用小數(shù)點，理論上可以這樣寫。
.border {
border: 1px solid #ffffff;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #ffffff; }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #ffffff; }
}
但是由于安卓與低版本IOS不適用，所以不推薦這種寫法。
方法三 box-shadow
利用CSS對陰影處理的方式實現(xiàn)
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
優(yōu)點是基本所有場景都能滿足，包含圓角的button，單條，多條線。
缺點是顏色不好處理， 黑色 rgba(0,0,0,1) 是最濃的情況，而且有陰影出現(xiàn)。
方法四 background-image背景漸變實現(xiàn)
通過CSS修改image，設(shè)置圖片50%有顏色，50%透明，實現(xiàn)1px的效果。
linear-gradient屬性一個表示顏色線性漸變的 image，語法是linear-gradient([ [ [ <angle>| to[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);詳細講解看MDN文檔
.border {
background-image: linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px, 1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
這個方法代碼量大，而且無法實現(xiàn)邊框的圓角效果。
方法五 border-image
圖片可以是gif、png、base 64，
.border{
border-width: 1px;
border-image: url(border.png) 2 repeat;
}
缺點
- 想要實現(xiàn)圓角效果的話要放大修改圖片
- 邊框顏色不方便修改
- 邊框存在多種顏色的時候麻煩
方法六 transform: scale(0.5)+偽元素:before, :after
原理去掉把原先元素的 border ，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 屬性將元素大小縮小為設(shè)置的值的一半，將原先的元素相對定位，新寫的 border 設(shè)置絕對定位。
使用樣式的時候，要結(jié)合 JS 代碼，判斷是否 Retina 屏
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('.box').className += 'box';
}
看一下demo代碼：
.box {
border: none;
position: relative;
z-index: 3;
}
.box :before {
content: '';
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #0b2029;
border-radius: 8px;
border: 2px solid #737373;
font-size: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
z-index: -1;
}
:before和:after 是用來給指定的元素的內(nèi)容前面或后面插入新的內(nèi)容。給:before添加了屬性 content并設(shè)置為空（對于偽元素 :before 和 :after 而言，屬性 content 是必須設(shè)置的否則偽元素不會生效），然后給它設(shè)置我需要的樣式的兩倍大小，再設(shè)置transform: scale(0.5);就實現(xiàn)了1px的效果。像這里的demo代碼，我的box里面有input，所以要設(shè)置index，否則input就會被覆蓋。
注意<input type="button">沒有:before, :after偽元素。
ps：起初，偽元素的前綴使用的是單冒號語法，但為了和偽類(pseudo-classes)”區(qū)分開，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before & ::after ，但是因為IE8只支持單冒號的語法，所以如果你想兼容IE8，保險的做法是使用單冒號。
對于大型的項目，推薦使用手淘的flexible方案，小型的頁面用 transform: scale(0.5)+偽元素:before, :after較為方便。
