使用vw+rem實現移動端適配

利用視口單位實現適配佈局

響應式佈局的實現依靠媒體查詢（ Media Queries ）來實現，選取主流設備寬度尺寸做爲斷點針對性寫額外的樣式進行適配，但這樣作會比較麻煩，只能在選取的幾個主流設備尺寸下呈現完美適配。即便使用rem方式來佈局，也須要寫一段js代碼來動態改變根元素的大小。比較成熟的作法如手淘的作法。使用Flexible實現手淘H5頁面的終端適配
如今咱們介紹一種全新的適配方式即：利用視口單位來實現適配這樣就不用引入多餘的js代碼

• 根據CSS3規範，視口單位主要包括如下4個：
• vw : 1vw 等於視口寬度的1%
• vh : 1vh 等於視口高度的1%
• vmin : 選取 vw 和 vh 中最小的那個
• vmax : 選取 vw 和 vh 中最大的那個 詳細文章可參考再聊移動端頁面的適配

作法一：只使用vw作css單位

• 使用vw做爲css單位就涉及到設計師的設計稿如何轉化未vw的問題。

  • 使用sass作爲函數編譯

  //以iphone6的設計稿舉例
  $base_vw = 375;
  @function vw ($px) {
      return ($px/$base_vw) * 100vw
  };
  複製代碼

  • 使用

  #app {
          width: 100%;
          .container {
              padding: vw(20) vw(20) vw(20) vw(20)
              .main {
                  width 100%
                  >h1 {
                      font-size 14px
                  }
              }
          }
      }
  複製代碼

  • 高清屏一個像素解決

  .border-1px-bottom {
          position: relative;
          &::after {
              content: '';
              position: absolute;
              z-index: 1;
              background-color: #f8f8f8;
              height: 1px;
              left: 0;
              right: 0;
              top: 0;
              pointer-events: none;
              @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                  -webkit-transform: scaleY(0.5);
                  -webkit-transform-origin: 50% 0%;
              }
          }
      }
  複製代碼

  • 對於banner要實現高寬比的圖須要使用padding-top

    .banner {
        position: relative;
        padding-top: percentage(100/750); // 使用padding-top
        height: 0;
        overflow: hidden;
        img {
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0; 
        }
    }
    複製代碼

作法二：使用vw+rem作css單位

雖然vw能更優雅的適配，可是仍是有點小問題，就是寬，高無法限制。那麼結合rem就能夠完美解決啦。

// 設置html根元素的大小 750px->75 640px->64
// 將屏幕分紅10份，每份做爲根元素的大小。
$vw_fontsize: 75
@function rem($px) {
    // 例如：一個div的寬度爲100px，那麼它對應的rem單位就是（100/根元素的大小）* 1rem
    @return ($px / $vw_fontsize) * 1rem;
}
$base_design: 750
html {
    // rem與vw相關聯
    font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
    // 同時，經過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}

// body 也增長最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大太小
body {
    max-width: 540px;
    min-width: 320px;
}

複製代碼

使用

#app {
            width: 100%;
            .container {
                padding: rem(20) rem(20) rem(20) rem(20)
                .main {
                    width 100%
                    >h1 {
                        font-size 14px
                    }
                }
            }
        }
複製代碼

參考凹凸實驗室

• 利用視口單位實現適配佈局