扣丁學堂HTML5培訓詳解移動端HTML5頁面中1px邊框的幾種解決方法

時間 2019-12-08

標籤學堂 html5 html 培訓詳解移動頁面 1px 邊框幾種解決方法欄目 HTML5 简体版

原文原文鏈接

本篇文章扣丁學堂HTML5培訓小編給讀者們分享一下移動端HTML5頁面中1px邊框的幾種解決方法，對此感興趣的小夥伴就隨小編來了解一下吧。css

問題提出：html

這是一個比較老的問題了，先來看一下情形：web

設計師拿着手機過來：這些邊框都粗了啊，個人設計稿上是1px的。微信

我：????我寫的是1px呀，不信你看。(說着拿出了css代碼)學習

設計師：不對啊我眼睛看這個邊框比我設計稿上粗不少，看起來好奇怪。scala

我：那我把它改爲0.5px你看看(邊說邊改了代碼)設計

設計師一看，點點頭，果真好不少。code

後來發現一樣的代碼在某些安卓機上是有問題的，會致使0.5px的線看不見。orm

奇了怪了，顯然改爲0.5px不能解決問題，可是確實1px邊框看上去比設計稿上要粗不少，緣由何在?視頻

1px邊框的表現：

咱們直接使用css去定1px的邊框。

html:

</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; // 邊框設置成1px

}

解決方法一：僞類+transform

抱着解決問題的心理，雖然當時也沒有想清楚緣由在哪，可是仍是找到了相關的解決方法，其中一些方法中提到使用邊框圖片border-image或者box-shadow，也能夠模擬出想要的1px邊框效果，可是我我的以爲不通用，也不是常規解決方法。

最終選擇的是使用僞類+transform方法：原理是把原先元素的 border 去掉，而後利用 :before 或者 :after 重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位。

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;

}

這樣的話，畫出的線確實細不少，我在以後長達一年的時間裏面通常都是使用上面的方法去解決1px邊框的問題，但用着用着，咱們發現了幾個問題：

1.爲何是scaleY(0.5)？這個0.5是怎麼得出的？是否是全部機型都是要scale縮小到一半，換句話說是否是通用？

2.若是我要同時畫一個容器的四個邊框怎麼辦？

3.支不支持圓角邊框？

後兩個問題改造一下上面的代碼，能夠找到解決方法(爲了方便查看效果，我把平時寫法得出的效果和使用僞類得出的效果放一塊兒，這樣更容易看出差異)：

<!DOCTYPE html>

<head>

<title>移動端1px邊框問題</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>

細線

</ul>

</body>

</html>

解決方法二：rem + viewport

說到這裏，解決方法就很明瞭了：咱們能夠在運行的時候拿到設備的devicePixelRatio，動態改變viewport的initial-scale爲 1/devicePixelRatio，這樣就能保證1px的寬度就是真正的1物理像素寬。其餘適配使用rem（由於使用px的話都會被縮小）

代碼以下：

<!DOCTYPE html>

<head>

<title>移動端1px邊框問題</title>

(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>

</body>

</html>

從上來看，回到以前的問題，"1.爲何是scaleY(0.5)?這個0.5是怎麼得出的?是否是全部機型都是要scale縮小到一半，換句話說是否是通用?"其實並不必定是0.5,在dpr爲3的設備上其實應該是0.3333……，也不通用，由於每一個手機的dpr可能不同，可是方法一中的0.5通常由於至少比1px細，因此也差很少能夠知足設計師的要求了。

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。