免費(fèi)AI編程助手
今天我們來(lái)說(shuō)說(shuō)有關(guān)于：“在移動(dòng)端Html5頁(yè)面中1px邊框怎么解決？”這個(gè)問(wèn)題，下面是相關(guān)問(wèn)題整理的內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
問(wèn)題提出
這是一個(gè)比較老的問(wèn)題了，我第一次注意到的時(shí)候，是UI設(shè)計(jì)師來(lái)找我麻煩，emmm那時(shí)候我才初入前端職場(chǎng)，啥也不懂啊啊啊啊啊，情形是這樣的：
設(shè)計(jì)師拿著手機(jī)過(guò)來(lái)：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的
我：？？？？我寫(xiě)的是1px呀，不信你看。（說(shuō)著拿出了css代碼
設(shè)計(jì)師：不對(duì)啊我眼睛看來(lái)這個(gè)邊框比我設(shè)計(jì)稿上粗很多，看起來(lái)好奇怪（emmm果然像素眼
我：那我把它改成0.5px你看看（邊說(shuō)邊改了代碼
設(shè)計(jì)師一看，點(diǎn)點(diǎn)頭，果然好很多。
后來(lái)發(fā)現(xiàn)同樣的代碼在某些安卓機(jī)上是有問(wèn)題的，會(huì)導(dǎo)致0.5px的線看不見(jiàn)。
奇了怪了，顯然改成0.5px不能解決問(wèn)題，但是確實(shí)1px邊框看上去比設(shè)計(jì)稿上要粗很多，原因何在？
1px邊框的表現(xiàn)
我直接使用css去定1px的邊框，
html:
<ul class="hairlines">
<li>1</li>
<li>2</li>
</ul>css:
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
margin-top: 10px;
border-bottom: 1px solid #cccccc; // 邊框設(shè)置成1px
}得到的截圖如下：
看上去是比設(shè)計(jì)稿上要粗很多，設(shè)計(jì)稿上的應(yīng)該是下面這樣的，大家可以比對(duì)一下：
解決方法一：偽類(lèi)+transform
抱著解決問(wèn)題的心理，雖然當(dāng)時(shí)也沒(méi)有想清楚原因在哪，但是還是找到了相關(guān)的解決方法，其中一些方法中提到使用邊框圖片?border-image?或者?box-shadow?，也可以模擬出想要的1px邊框效果，但是我個(gè)人覺(jué)得不通用，也不是常規(guī)解決方法。
最終選擇的是使用偽類(lèi)+transform方法：原理是把原先元素的 ?border ?去掉，然后利用 :?before ?或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對(duì)定位，新做的 border 絕對(duì)定位。
html同上
css如下：
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.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;
}這樣的話，畫(huà)出的線確實(shí)細(xì)很多，我在之后長(zhǎng)達(dá)一年的時(shí)間里面一般都是使用上面的方法去解決1px邊框的問(wèn)題，但用著用著，我發(fā)現(xiàn)了幾個(gè)問(wèn)題：
1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說(shuō)是不是通用？
2.如果我要同時(shí)畫(huà)一個(gè)容器的四個(gè)邊框怎么辦？
3.支不支持圓角邊框？
后兩個(gè)問(wèn)題改造一下上面的代碼，可以找到解決方法(為了方便查看效果，我把平時(shí)寫(xiě)法得出的效果和使用偽類(lèi)得出的效果放一起，這樣更容易看出差別)：
<!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>這樣得出的效果圖如下：
下面的邊框明顯細(xì)很多，更貼近于設(shè)計(jì)稿。
那么“1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說(shuō)是不是通用？”這個(gè)問(wèn)題該怎么回答呢？
這就要回到問(wèn)題的本質(zhì)，為什么我明明在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的像素(通常稱(chēng)為邏輯像素)將對(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ì)被縮小）
代碼如下：
<!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> 得到的效果可以看下圖(手機(jī)上看更明顯一些)：
從上來(lái)看，回到之前的問(wèn)題，"1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說(shuō)是不是通用？"其實(shí)并不一定是0.5,在dpr為3的設(shè)備上其實(shí)應(yīng)該是0.3333……，也不通用，因?yàn)槊總€(gè)手機(jī)的dpr可能不一樣，但是方法一中的0.5一般因?yàn)橹辽俦?px細(xì)，所以也差不多可以滿足設(shè)計(jì)師的要求了。
通過(guò)這篇文章希望大家對(duì)：“在移動(dòng)端Html5頁(yè)面中1px邊框怎么解決？”這個(gè)問(wèn)題有所了解了吧！當(dāng)然了如果你對(duì)于html5其他內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。
