自己開(kāi)發(fā)出的邊框粗于設(shè)計(jì)師給定的寬度嗎？設(shè)計(jì)師驗(yàn)收通過(guò)不過(guò)嗎？如果你也遇到看看解決辦法吧。
解決方法一：偽類+transform
偽類+transform方法：原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對(duì)定位，新做的 border 絕對(duì)定位。
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
如果我要同時(shí)畫(huà)一個(gè)容器的四個(gè)邊框怎么辦？
支不支持圓角邊框？
相同原理下邊給出答案，上邊是通過(guò)偽類本身來(lái)實(shí)現(xiàn)一條邊框線，而四個(gè)邊框是利用偽類的邊框來(lái)實(shí)現(xiàn)的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>移動(dòng)端1px邊框問(wèn)題</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.lines {
width: 200px;
margin: 0 auto;
}
.lines li {
border: 1px solid #cccccc;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 13px;
margin-top: 10px;
}
.hairlines {
width: 200px;
margin: 0 auto;
border-radius: 3px;
}
.hairlines li{
height: 50px;
line-height: 50px;
border:none;
text-align: center;
position: relative;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #cccccc;
border-radius: 26px;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head>
<body>
粗線
<ul class="lines">
<li>1</li>
<li>2</li>
</ul>
細(xì)線
<ul class="hairlines">
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
為什么我明明在css里面寫(xiě)了1px，但是仍然會(huì)出現(xiàn)“看起來(lái)比平時(shí)要粗很多的效果”？
原來(lái)css中設(shè)置的像素并不是跟設(shè)備的像素點(diǎn)一一對(duì)應(yīng)，這就是說(shuō)，我在css中寫(xiě)明1px，實(shí)際在手機(jī)上，看到的有可能并不是一個(gè)像素點(diǎn)占據(jù)的寬度。
css的像素是一個(gè)抽象的相對(duì)的概念，在不同的設(shè)備和環(huán)境中，所表示的物理像素點(diǎn)是不一樣的，在比較老的設(shè)備上，屏幕像素密度比較低，這樣，確實(shí)一個(gè)1px的像素就是一個(gè)物理像素，但是技術(shù)飛速發(fā)展，現(xiàn)在的手機(jī)屏幕都是高分辨率，在尺寸未變化的情況下，一個(gè)屏幕上將充滿著更多的像素點(diǎn)，這時(shí)一個(gè)css的像素(通常稱為邏輯像素)將對(duì)應(yīng)多個(gè)物理像素點(diǎn)。
那到底一個(gè)css的像素寬度上對(duì)應(yīng)多少個(gè)物理像素點(diǎn)呢？
這就要提到devicePixelRatio（設(shè)備像素比）
devicePixelRatio = 設(shè)備上物理像素/獨(dú)立像素，可以通過(guò)window.devicePixelRatio獲取，這個(gè)像素比恰好可以描述一個(gè)css的像素寬度上對(duì)應(yīng)多少個(gè)物理像素點(diǎn)，其實(shí)就是對(duì)應(yīng)devicePixelRatio個(gè)像素點(diǎn)。
當(dāng)viewport的屬性initial-scale為1時(shí)，頁(yè)面大小正常，但initial-scale為0.5時(shí)，頁(yè)面被縮小了1倍，devicePixelRatio為2的設(shè)備本來(lái)1個(gè)CSS像素寬度占2個(gè)物理像素寬度，縮小后的1個(gè)CSS像素寬度就只占1個(gè)物理像素，即實(shí)現(xiàn)了真正的1物理像素。
解決方法二：rem + viewport
說(shuō)到這里，解決方法就很明了了：我們可以在運(yùn)行的時(shí)候拿到設(shè)備的devicePixelRatio，動(dòng)態(tài)改變viewport的initial-scale為 1/devicePixelRatio，這樣就能保證1px的寬度就是真正的1物理像素寬。其他適配使用rem（因?yàn)槭褂胮x的話都會(huì)被縮?。?/p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">-->
<title>移動(dòng)端1px邊框問(wèn)題</title>
<script>
(function () {
var clientWidth = window.screen.width;
var dpr = window.devicePixelRatio;
var vp = document.createElement('meta');
document.documentElement.style.fontSize = clientWidth > 414 ? '20px' : 20 * dpr * clientWidth / 360 + 'px';
vp.name = 'viewport';
vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
var m = document.getElementsByTagName('meta')[0];
m.parentNode.insertBefore(vp, m);
})();
</script>
<style>
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.lines {
width: 10rem;
margin: 0 auto;
}
.lines li {
border: 1px solid #cccccc;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
border-radius: 0.6rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<ul class="lines">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
注意點(diǎn)
我后來(lái)在自己的項(xiàng)目中使用上面的根據(jù)dpr去計(jì)算initial-scale這個(gè)方法時(shí)，發(fā)現(xiàn)了一個(gè)坑，當(dāng)時(shí)我的頁(yè)面只是一個(gè)說(shuō)明性的頁(yè)面，基本上都是文字，我發(fā)現(xiàn)這個(gè)適配方法使用之后，文字大小并不能適配，現(xiàn)象來(lái)看，就是文字不能隨著屏幕的變小而變小，但是變大是可以的。
后來(lái)查了下，發(fā)現(xiàn)是瀏覽器溢出算法的問(wèn)題，也就是瀏覽器檢測(cè)到文字過(guò)小的時(shí)候，會(huì)將文字放大，以達(dá)到不影響閱讀的效果?？梢栽谠O(shè)置文字的時(shí)候加上
html {
text-size-adjust: none;
}
這樣文字大小也可以適配了。
