retina屏中1物理像素border的實現

問題的產生

retina屏會以2個（乃至3個）物理像素來顯示一個CSS像素（1px），因此在CSS中指定1px的邊框實際佔據的倒是2個以上物理像素，在retina屏用戶體驗較差。

幾種解決方案（考慮1px=2dip）

使用0.5px

問題：只在Firefox and Safari 8+支持，安卓不支持。

使用圖片

採用一張圖片做爲border：

border-width: 1px;
border-image: url(border.gif) 2 repeat;
複製代碼

border-img屬性會將圖片（如上圖）切爲九宮格，放到邊框的四邊和四角。因爲圖片外沿一半爲實色、一半爲透明，因此1px的圖片邊框，實際顯示出的就是0.5px的邊框了。

問題：

• 沒法設置顏色
• 邊框實際仍是佔用了1px的空間
• 不使用base64的狀況下，要加載多一張圖片

使用漸變

原理相似上面的圖片，將1px的漸變拆爲兩半，一半透明一半實色，但好處是做爲背景不會實際佔據盒子的0.5px空間。

background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
            linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, 
            linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, 
            linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat; 
複製代碼

問題：沒法處理圓角

使用縮放

給一個原元素兩倍大小的僞元素，指定1px邊框，再縮小一半，便可獲得0.5px邊框。

.retina-border-scale {
    position: relative;
}
.retina-border-scale:before {
    content: '';
    border: 1px solid black;
    transform: scale(0.5);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
}
複製代碼

問題：

• 原元素須要用相對定位
• <td>元素上不起做用

其餘方法

• 使用box-shadow：實現簡單，但效果很差、會有陰影
• 直接按照放大的設計稿重構，再指定viewport的initial-scale=0.5縮小整個頁面：簡單粗暴

對非retina屏的兼容

因爲非retina屏下的1物理像素border直接用px作單位便可，所以針對不一樣屏幕，會有多套樣式實現。
而爲了正確地應用樣式，首先得有判斷retina屏的能力。這其中，CSS的媒體查詢裏提供了min-device-pixel-ratio或min-resolution；而瀏覽器也提供了window.devicePixelRatio這個js API來獲取CSS像素和物理像素的比值。
最後，咱們就能夠根據屏幕在代碼裏應用適當的樣式了。

ref

CSS, Retina, and Physical Pixels