retina屏會以2個(乃至3個)物理像素來顯示一個CSS像素(1px),因此在CSS中指定1px的邊框實際佔據的倒是2個以上物理像素,在retina屏用戶體驗較差。css
問題:只在Firefox and Safari 8+支持,安卓不支持。瀏覽器
採用一張圖片做爲border:ide
border-width: 1px;border-image:url(border.gif) 2 repeat;
border-img屬性會將圖片(如上圖)切爲九宮格,放到邊框的四邊和四角。因爲圖片外沿一半爲實色、一半爲透明,因此1px的圖片邊框,實際顯示出的就是0.5px的邊框了。ui
問題:url
沒法設置顏色spa
邊框實際仍是佔用了1px的空間設計
不使用base64的狀況下,要加載多一張圖片code
原理相似上面的圖片,將1px的漸變拆爲兩半,一半透明一半實色,但好處是做爲背景不會實際佔據盒子的0.5px空間。orm
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屏下的1物理像素border直接用px作單位便可,所以針對不一樣屏幕,會有多套樣式實現。
而爲了正確地應用樣式,首先得有判斷retina屏的能力。這其中,CSS的媒體查詢裏提供了min-device-pixel-ratio或min-resolution;而瀏覽器也提供了window.devicePixelRatio這個js API來獲取CSS像素和物理像素的比值。
最後,咱們就能夠根據屏幕在代碼裏應用適當的樣式了。