欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何解決移動(dòng)端Html5頁面中1px邊框的問題-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何解決移動(dòng)端Html5頁面中1px邊框的問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到沙依巴克網(wǎng)站設(shè)計(jì)與沙依巴克網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋沙依巴克地區(qū)。

問題提出

這是一個(gè)比較老的問題了，我第一次注意到的時(shí)候，是UI設(shè)計(jì)師來找我麻煩，emmm那時(shí)候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：

設(shè)計(jì)師拿著手機(jī)過來：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的

我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼

設(shè)計(jì)師：不對啊我眼睛看來這個(gè)邊框比我設(shè)計(jì)稿上粗很多，看起來好奇怪（emmm果然像素眼

我：那我把它改成0.5px你看看（邊說邊改了代碼

設(shè)計(jì)師一看，點(diǎn)點(diǎn)頭，果然好很多。

后來發(fā)現(xiàn)同樣的代碼在某些安卓機(jī)上是有問題的，會(huì)導(dǎo)致0.5px的線看不見。

奇了怪了，顯然改成0.5px不能解決問題，但是確實(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
    }

得到的截圖如下：

如何解決移動(dòng)端Html5頁面中1px邊框的問題

看上去是比設(shè)計(jì)稿上要粗很多，設(shè)計(jì)稿上的應(yīng)該是下面這樣的，大家可以比對一下：

如何解決移動(dòng)端Html5頁面中1px邊框的問題

解決方法一：偽類+transform

抱著解決問題的心理，雖然當(dāng)時(shí)也沒有想清楚原因在哪，但是還是找到了相關(guān)的解決方法，其中一些方法中提到使用邊框圖片border-image或者box-shadow，也可以模擬出想要的1px邊框效果，但是我個(gè)人覺得不通用，也不是常規(guī)解決方法。

最終選擇的是使用偽類+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;
    }

這樣的話，畫出的線確實(shí)細(xì)很多，我在之后長達(dá)一年的時(shí)間里面一般都是使用上面的方法去解決1px邊框的問題，但用著用著，我發(fā)現(xiàn)了幾個(gè)問題：

1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說是不是通用？

2.如果我要同時(shí)畫一個(gè)容器的四個(gè)邊框怎么辦？

3.支不支持圓角邊框？

后兩個(gè)問題改造一下上面的代碼，可以找到解決方法(為了方便查看效果，我把平時(shí)寫法得出的效果和使用偽類得出的效果放一起，這樣更容易看出差別)：

<!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邊框問題</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>

這樣得出的效果圖如下：

如何解決移動(dòng)端Html5頁面中1px邊框的問題

下面的邊框明顯細(xì)很多，更貼近于設(shè)計(jì)稿。

那么“1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說是不是通用？”這個(gè)問題該怎么回答呢？

這就要回到問題的本質(zhì)，為什么我明明在css里面寫了1px，但是仍然會(huì)出現(xiàn)“看起來比平時(shí)要粗很多的效果”？

查了資料看了下，原來css中設(shè)置的像素并不是跟設(shè)備的像素點(diǎn)一一對應(yīng)，這就是說，我在css中寫明1px，實(shí)際在手機(jī)上，看到的有可能并不是一個(gè)像素點(diǎn)占據(jù)的寬度。

css的像素是一個(gè)抽象的相對的概念，在不同的設(shè)備和環(huán)境中，所表示的物理像素點(diǎn)是不一樣的，在比較老的設(shè)備上，屏幕像素密度比較低，這樣，確實(shí)一個(gè)1px的像素就是一個(gè)物理像素，但是技術(shù)飛速發(fā)展，現(xiàn)在的手機(jī)屏幕都是高分辨率，在尺寸未變化的情況下，一個(gè)屏幕上將充滿著更多的像素點(diǎn)，這時(shí)一個(gè)css的像素(通常稱為邏輯像素)將對應(yīng)多個(gè)物理像素點(diǎn)。

那到底一個(gè)css的像素寬度上對應(yīng)多少個(gè)物理像素點(diǎn)呢？

這就要提到devicePixelRatio（設(shè)備像素比）

devicePixelRatio = 設(shè)備上物理像素/獨(dú)立像素，可以通過window.devicePixelRatio獲取，這個(gè)像素比恰好可以描述一個(gè)css的像素寬度上對應(yīng)多少個(gè)物理像素點(diǎn)，其實(shí)就是對應(yīng)devicePixelRatio個(gè)像素點(diǎn)。

當(dāng)viewport的屬性initial-scale為1時(shí)，頁面大小正常，但initial-scale為0.5時(shí)，頁面被縮小了1倍，devicePixelRatio為2的設(shè)備本來1個(gè)CSS像素寬度占2個(gè)物理像素寬度，縮小后的1個(gè)CSS像素寬度就只占1個(gè)物理像素，即實(shí)現(xiàn)了真正的1物理像素。

解決方法二：rem + viewport

說到這里，解決方法就很明了了：我們可以在運(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邊框問題</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ī)上看更明顯一些)：

如何解決移動(dòng)端Html5頁面中1px邊框的問題

從上來看，回到之前的問題，"1.為什么是scaleY(0.5)？這個(gè)0.5是怎么得出的？是不是所有機(jī)型都是要scale縮小到一半，換句話說是不是通用？"其實(shí)并不一定是0.5,在dpr為3的設(shè)備上其實(shí)應(yīng)該是0.3333&hellip;&hellip;，也不通用，因?yàn)槊總€(gè)手機(jī)的dpr可能不一樣，但是方法一中的0.5一般因?yàn)橹辽俦?px細(xì)，所以也差不多可以滿足設(shè)計(jì)師的要求了。

關(guān)于“如何解決移動(dòng)端Html5頁面中1px邊框的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：如何解決移動(dòng)端Html5頁面中1px邊框的問題-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://aaarwkj.com/article30/dpgjpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、營銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、服務(wù)器托管、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化
日韩一区二区三区91| 视频免费观看网站不卡| 微拍福利一区二区三区| 久久96国产精品久久秘臀| 麻豆午夜福利在线播放| 不卡一区二区福利日本| 九九九视频在线观看免费| 亚洲欧美日韩校园春色| 亚洲成人av网址大全| 亚洲欧美日韩有码一区| 成年人网站一级黄色免费| 91国产熟女自拍视频| 福利一区二区在线视频| 青青草视频在线好好热| 欧美夫妻成人性生活视频| 亚洲国产成在人网站天堂| 国产麻豆91精品女同性恋| 在线欧美日韩一区二区三区| av一区二区中文字幕| 美女被强到爽高潮不断在线| 亚洲丰满一区二区三区在线| 国产精品三级电影网| av东京热免费看一区| 日韩精品一区二区三区欲色av| 国产av麻豆全部免费| 视频播放一区二区三区毛片| 日本高清免费黄色录像| 99热免费精品在线观看| 中文字幕人妻丝袜乱一区二区| 欧美日韩在线精品1区2区| 丰满人妻毛片一区二区三区| 一欧美一区二区三区| 国产成人大片一区二区三区| 亚洲理论在线观看电影| 国产怡红院在线视频观看| 东京一区二区三区四区黄片| 热久久视频这里只有精品| 欧美日本黄色一级视频| 久久精品一偷一偷国产| 亚洲av日韩av高潮| 四季一区二区三区av|