亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當(dāng)前位置:首頁 > IT技術(shù) > 移動(dòng)平臺(tái) > 正文

              一像素邊框如何處理(移動(dòng)端)
              2021-09-02 21:26:05

              由于分辨率的差異,高清手機(jī)屏上的 1px實(shí)際上是由 2×2 個(gè)像素點(diǎn)來渲染,有的屏幕如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)典的 “一像素問題”

              這里先對(duì)比一下不同方法做出來的邊框效果如何 :?

              一像素邊框如何處理(移動(dòng)端)_scala

              很明顯可以看到最后一個(gè)邊框比前面的兩個(gè)邊框都細(xì),但是這種辦法的邊框并不是真正的 border,而是高度或者寬度為 1px 的塊狀模型,重點(diǎn)是這種辦法不能做出圓角,一般都用來畫分割線或者單個(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>一像素問題</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">
                          通過偽類創(chuàng)建邊框,然后通過媒體查詢來適配
                      </div>
                  </div>
              </body>
              </html>

              ?

              ?

              ?

              還有一種方法就是通過 js 獲取到設(shè)備像素比,然后動(dòng)態(tài)添加 <meta> 標(biāo)簽(?網(wǎng)頁的內(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);       
                  })();

              這種方法多用于媒體查詢,也就是在設(shè)置頁面的時(shí)候分2倍圖或者3倍圖來做(這樣的話所有內(nèi)容都要根據(jù)像素比來設(shè)置切圖)


              最后看到一個(gè)沒試過的方法,就是設(shè)置border-width:thin;

              前端菜鳥一枚,習(xí)慣記錄平時(shí)遇到的一些問題和學(xué)習(xí)筆記,覺得有用的可以點(diǎn)個(gè)支持!
              ?
              ?
              ?

              本文摘自 :https://blog.51cto.com/u

              開通會(huì)員,享受整站包年服務(wù)立即開通 >