由于分辨率的差異,高清手機屏上的 1px實際上是由 2×2 個像素點來渲染,有的屏幕如iPhone6s plus甚至用到了 3×3 個像素點
所以 border: 1px 在移動端會渲染為 2px 的邊框甚至3px的邊框
雖然用戶在實際使用的時候,很難發(fā)現(xiàn)這 1px 的差異,但是設計師往往會在這 1px 上較勁,這就產(chǎn)生了經(jīng)典的 “一像素問題”
這里先對比一下不同方法做出來的邊框效果如何 :?
很明顯可以看到最后一個邊框比前面的兩個邊框都細,但是這種辦法的邊框并不是真正的 border,而是高度或者寬度為 1px 的塊狀模型,重點是這種辦法不能做出圓角,一般都用來畫分割線或者單個邊框
?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>一像素問題</title> <style> * { margin: 0; } html { font-size: 20px; } .wrap { padding: 1rem; } .wrap div { margin: 1rem; } .wrapper1 { border: 1px solid #000000; } .wrapper2 { border: 0.05rem solid #000000; } .wrapper3{ position: relative; border-top: none !important; } .wrapper3::after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; -webkit-transform-origin: left bottom; transform-origin: left bottom; } /* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .wrapper3::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .wrapper3::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } </style> </head> <body> <div class="wrap"> <div class="wrapper1"> 這里是直接設置1px邊框 </div> <div class="wrapper2"> 這里是直接設置0.05rem邊框 </div> <div class="wrapper3"> 通過偽類創(chuàng)建邊框,然后通過媒體查詢來適配 </div> </div> </body> </html>
?
?
?
還有一種方法就是通過 js 獲取到設備像素比,然后動態(tài)添加 <meta> 標簽(?網(wǎng)頁的內(nèi)容都渲染在 viewport 上,所以設備像素比的差異,直接影響的也是 viewport 的大小 ):
(function() { var scale = 1.0; if (window.devicePixelRatio === 2) { scale *= 0.5; } if (window.devicePixelRatio === 3) { scale *= 0.333333; } var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />'; document.write(text); })();
這種方法多用于媒體查詢,也就是在設置頁面的時候分2倍圖或者3倍圖來做(這樣的話所有內(nèi)容都要根據(jù)像素比來設置切圖)
最后看到一個沒試過的方法,就是設置border-width:thin;
前端菜鳥一枚,習慣記錄平時遇到的一些問題和學習筆記,覺得有用的可以點個支持!
?
?
?
本文摘自 :https://blog.51cto.com/u