APP
由于分辨率的差異，高清手機(jī)屏上的 1px實(shí)際上是由 2×2 個(gè)像素點(diǎn)來(lái)渲染，有的屏幕如iPhone6s plus甚至用到了 3×3 個(gè)像素點(diǎn)
所以 border: 1px 在移動(dòng)端會(huì)渲染為 2px 的邊框甚至3px的邊框
雖然用戶在實(shí)際使用的時(shí)候，很難發(fā)現(xiàn)這 1px 的差異，但是設(shè)計(jì)師往往會(huì)在這 1px 上較勁，這就產(chǎn)生了經(jīng)典的 “一像素問(wèn)題”
這里先對(duì)比一下不同方法做出來(lái)的邊框效果如何 :?
很明顯可以看到最后一個(gè)邊框比前面的兩個(gè)邊框都細(xì),但是這種辦法的邊框并不是真正的 border，而是高度或者寬度為 1px 的塊狀模型，重點(diǎn)是這種辦法不能做出圓角，一般都用來(lái)畫(huà)分割線或者單個(gè)邊框
?
<!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>一像素問(wèn)題</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">
這里是直接設(shè)置1px邊框
</div>
<div class="wrapper2">
這里是直接設(shè)置0.05rem邊框
</div>
<div class="wrapper3">
通過(guò)偽類(lèi)創(chuàng)建邊框,然后通過(guò)媒體查詢(xún)來(lái)適配
</div>
</div>
</body>
</html>
?
?
?
還有一種方法就是通過(guò) js 獲取到設(shè)備像素比，然后動(dòng)態(tài)添加 <meta> 標(biāo)簽(?網(wǎng)頁(yè)的內(nèi)容都渲染在 viewport 上，所以設(shè)備像素比的差異，直接影響的也是 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);
})();
這種方法多用于媒體查詢(xún),也就是在設(shè)置頁(yè)面的時(shí)候分2倍圖或者3倍圖來(lái)做(這樣的話所有內(nèi)容都要根據(jù)像素比來(lái)設(shè)置切圖)
最后看到一個(gè)沒(méi)試過(guò)的方法,就是設(shè)置border-width:thin;
前端菜鳥(niǎo)一枚，習(xí)慣記錄平時(shí)遇到的一些問(wèn)題和學(xué)習(xí)筆記，覺(jué)得有用的可以點(diǎn)個(gè)支持！
?
?
?
本文摘自 ：https://blog.51cto.com/u
