<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          移動端1px像素解決方式,從1px像素問題剖析像素及viewport

          時間:?2017-11-21閱讀:?3313標簽:?px

          在移動端web開發過程中,如果你對邊框設置border:1px,會發現,邊框在某些手機機型上面顯示的1px比實際感覺會變粗,這也就是1像素問題。如下圖是對桌面瀏覽器和移動端border設置1px的比較。那么是什么導致這種原因的呢?


          一、1px像素產生原因

          首先,我們先對物理像素,設備獨立像素,設備像素比等概念進行了解。

          1、設備像素(device pixels)

          設備中能控制顯示的最小單位。能單獨顯示顏色的最小單位或點,稱作像素點或像點。


          屏幕尺寸及其屏幕分辨率

          屏幕尺寸是以英寸為單位(1英寸=2.54厘米),其中手機屏幕尺寸是計算的手機對角線的長度大小。

          PPI(屏幕像素密度),與屏幕分辨率及其屏幕尺寸有關系,計算公式為 (dw:屏幕橫向分辨率,dh:屏幕豎向分辨率,w:屏幕尺寸)。

          屏幕尺寸和屏幕分辨率示意圖如下圖:

          2、設備獨立像素(dpi)

          每英寸的像素,類似于密度,即每英寸的像素點數量。


          3、css像素與設備像素比(dpr)

          dpr=設備像素/設備獨立像素。可以通過window.devicePixelRatio獲取設備的dpr值。

          css像素是獨立于設備邏輯的,用于邏輯上衡量像素的單位。

          一般來說,在桌面的瀏覽器中,設備像素比(dpr)等于1,一個css像素就是代表的一個物理像素。而在移動端,大多數機型都不是為1,其中iphone的dpr普遍是2和3,那么一個css像素不再是對應一個物理像素,而是2個和3個物理像素。即我們通常在css中設置的width:1px,對應的便是物理像素中的2px。

          下面以小米為例,看一下android的dpr:


          4、viewport

          在手機上viewport一般有:

          layout viewport

          手機一般為了容納為桌面瀏覽器設計的網站,默認布局viewport寬度遠大于屏幕的寬度,為了讓用戶看到網站全貌,縮小網站。例如,apple一般將viewport寬度定為980px。

          visual viewport

          屏幕的可視區域,即物理像素尺寸

          ideal viewport

          最適合移動設備的viewport,ideal viewport的寬度等于移動設備的屏幕寬度

          為了讓viewport能夠等于ideal viewport,一般我們會添加meta標簽

          <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
          <!--width=device-width:寬度為設備寬度-->
          <!--initial-scale:縮放比為1-->
          <!--user-scalable=no:是否允許用戶自定義縮放-->


          二、1px像素解決方式

          我們知道了px是相對單位(關于px是相對單位還是絕對單位,很多地方說法不一,先保留觀點,等查證后再更新),我們在設置border:1px的時候,對于不同的手機機型顯示的寬度不一致(因dpr值不同)。

          解決邊框變粗的7種辦法

          1、0.5px邊框

          在2014年的 WWDC,“設計響應的Web體驗” 一講中,Ted O’Connor 講到關于“retina
          hairlines”(retina 極細的線):在retina屏上僅僅顯示1物理像素的邊框,開發者應該如何處理呢。
          他們曾介紹到 iOS 8 和 OS X Yosemite 即將支持 0.5px 的邊框:


          0.5px邊框

          額的神吶!so easy! 果真如此嗎?
          這樣還不夠(WWDC幻燈片通常是“唬人”的),但是相差不多。
          問題是 retina 屏的瀏覽器可能不認識0.5px的邊框,將會把它解釋成0px,沒有邊框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,還有 Android 設備。

          解決方案:
          解決方案是通過 JavaScript 檢測瀏覽器能否處理0.5px的邊框,如果可以,給html標簽元素添加個class。

          if (window.devicePixelRatio && devicePixelRatio >= 2) {
            var testElem = document.createElement('div');
            testElem.style.border = '.5px solid transparent';
            document.body.appendChild(testElem);
          }
          if (testElem.offsetHeight == 1) {
            document.querySelector('html').classList.add('hairlines');
          }
            document.body.removeChild(testElem);
          }
          // 腳本應該放在內,如果在里面運行,需要包裝 $(document).ready(function() {})
          

          然后,極細的邊框樣式就容易了:

          div {
            border: 1px solid #bbb;
          }
          .hairlines div {
            border-width: 0.5px;
          }
          

          優點:

          • 簡單,不需要過多代碼。

          缺點:

          • 無法兼容安卓設備、 iOS 8 以下設備。
          2、使用border-image實現

          準備一張符合你要求的border-image:


          底部邊框

          樣式設置:

          .border-bottom-1px {
            border-width: 0 0 1px 0;
            -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
            border-image: url(linenew.png) 0 0 2 0 stretch;
          }
          

          上文是把border設置在邊框的底部,所以使用的圖片是2px高,上部的1px顏色為透明,下部的1px使用視覺規定的border的顏色。如果邊框底部和頂部同時需要border,可以使用下面的border-image:

          上下邊框
          上下邊框

          樣式設置:

          .border-image-1px {
            border-width: 1px 0;
            -webkit-border-image: url(linenew.png) 2 0 stretch;
            border-image: url(linenew.png) 2 0 stretch;
          }
          

          到目前為止,我們已經能在iphone上展現1px border的效果了。但是我們發現這樣的方法在非視網膜屏上會出現border顯示不出來的現象,于是使用Media Query做了一些兼容,樣式設置如下:

          .border-image-1px {
            border-bottom: 1px solid #666;
          }
          @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            .border-image-1px {
              border-bottom: none;
              border-width: 0 0 1px 0;
              -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
              border-image: url(../img/linenew.png) 0 0 2 0 stretch;
            }
          }
          

          優點:

          • 可以設置單條,多條邊框
          • 沒有性能瓶頸的問題

          缺點:

          • 修改顏色麻煩, 需要替換圖片
          • 圓角需要特殊處理,并且邊緣會模糊
          3、使用background-image實現

          background-image 跟border-image的方法一樣,你要先準備一張符合你要求的圖片。然后將邊框模擬在背景上。
          樣式設置:

          .background-image-1px {
            background: url(../img/line.png) repeat-x left bottom;
            -webkit-background-size: 100% 1px;
            background-size: 100% 1px;
          }
          

          優點:

          • 可以設置單條,多條邊框
          • 沒有性能瓶頸的問題

          缺點:

          • 修改顏色麻煩, 需要替換圖片
          • 圓角需要特殊處理,并且邊緣會模糊
          4、多背景漸變實現

          與background-image方案類似,只是將圖片替換為css3漸變。設置1px的漸變背景,50%有顏色,50%透明。
          樣式設置:

          .background-gradient-1px {
            background:
              linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
              linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
              linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
              linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat
          }
          /* 或者 */
          .background-gradient-1px{
            background:
              -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
              -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
              -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
              -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat
          }
          

          優點:

          • 可以實現單條、多條邊框
          • 邊框的顏色隨意設置

          缺點:

          • 代碼量不少
          • 圓角沒法實現
          • 多背景圖片有兼容性問題
          5、使用box-shadow模擬邊框

          利用css 對陰影處理的方式實現0.5px的效果
          樣式設置:

          .box-shadow-1px {
            box-shadow: inset 0px -1px 1px -1px #c8c7cc;
          }
          

          優點:

          • 代碼量少
          • 可以滿足所有場景

          缺點:

          • 邊框有陰影,顏色變淺
          6、viewport + rem 實現

          同時通過設置對應viewport的rem基準值,這種方式就可以像以前一樣輕松愉快的寫1px了。
          在devicePixelRatio = 2 時,輸出viewport:

          <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
          

          在devicePixelRatio = 3 時,輸出viewport:

          <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
          

          這種兼容方案相對比較完美,適合新的項目,老的項目修改成本過大。
          對于這種方案,可以看看《使用Flexible實現手淘H5頁面的終端適配》
          優點:

          • 所有場景都能滿足
          • 一套代碼,可以兼容基本所有布局

          缺點:

          • 老項目修改代價過大,只適用于新項目
          7、偽類 + transform 實現

          對于老項目,有沒有什么辦法能兼容1px的尷尬問題了,個人認為偽類+transform是比較完美的方法了。
          原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 縮小一半,原先的元素相對定位,新做的 border 絕對定位。
          單條border樣式設置:

          .scale-1px{
            position: relative;
            border:none;
          }
          .scale-1px:after{
            content: '';
            position: absolute;
            bottom: 0;
            background: #000;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
          }
          

          四條boder樣式設置:

          .scale-1px{
            position: relative;
            margin-bottom: 20px;
            border:none;
          }
          .scale-1px:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            -webkit-transform-origin: left top;
            transform-origin: left top;
          }
          

          最好在使用前也判斷一下,結合 JS 代碼,判斷是否 Retina 屏:

          if(window.devicePixelRatio && devicePixelRatio >= 2){
            document.querySelector('ul').className = 'scale-1px';
          }
          

          優點:

          • 所有場景都能滿足
          • 支持圓角(偽類和本體類都需要加border-radius)

          缺點:

          • 對于已經使用偽類的元素(例如clearfix),可能需要多層嵌套
          來源整理:簡書地址http://www.jianshu.com/p/7e63f5a32636,
          知乎地址:https://zhuanlan.zhihu.com/p/30640770


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/145

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网