rem絕對自適應方案解析-js教程-PHP中文網

rem絕對自適應方案解析

一个新手

發布： 2017-10-12 10:40:40

原創

1611 人瀏覽過

rem

　　css3新增的rem是現在非常受歡迎的單位。來看看MDN上的說明：

　　這個單位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。

　　使用這個單位可以創造完美的可擴充佈局，只要依照頁面大小去修改html的font-size，就能達到適合整個頁面的目的。那麼問題來了，要如何讓html的font-size適應呢？

媒體查詢

　　media的用法這裡就不贅述，簡單說明透過媒體查詢修改html的font-size以達到頁面自適應的目的。

　　　　html如下：

  <article class="container">
    <ol>
      <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px  则1rem = 16px</li>
      <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
      <li>所以要实现html字体在不同页面大小下自适应</li>
    </ol>
  </article>

登入後複製

　　　　css如下：

####################################################################################################### ##

//媒体查询控制html字体大小 
 @media (max-width:767px) {
    html{
      font-size: 14px;
    }
  }
  @media (min-width:768px) {
    html{
      font-size: 16px;
    }
  }
  @media (min-width:992px) {
    html{
      font-size: 20px;
    }
  }

//页面元素的简单样式
  .container{
    padding: 1rem;
  }
  li{
    font-size: 1rem;
  }

登入後複製

###　　透過媒體查詢，在不同大小區間的頁面上，設定html的font-size都不一樣；######　　頁寬度為700px時，html的字體大小為14px，此時1rem = 14px ，li元素的字體大小就是14px，包裹的內邊距也是14px；改變頁寬為800px，html的字體大小為16px，此時1rem = 16px ，li元素的字體大小變成16px，包裹的內邊距也變成16px；######　　這種方式當然媒體查詢劃分的越細緻，自適應越強，但是無法實現完全自適應，只是區間性的。 ######vw######　　vw代表的視口的 1/100 100vw代表的即是視口的寬度。使用它我們就可以實作html的font-size完全自適應了。 ######　　###css如下：###############

  html{
    font-size: calc(16/768*100vw);   //以768时16px为标准进行缩放
  }

登入後複製

###　　例子的768px為一個假設的標準值，一般設計稿的大小為標準，然後再進行適配。調整頁面大小，可以完全自適應。 ######JS調整######　　載入頁面和調整視窗大小的時，設定html的字體大小，已達到自適應的目的。 ############

    (function(){
      var doc = document.documentElement,
          resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;

      function changeFontSize(){
        var clietWidth = doc.offsetWidth,
            scale = clietWidth/768;   //以768为标准

        doc.style.fontSize = scale * 16 + &#39;px&#39;;      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小变化或者手机横屏
      document.addEventListener(&#39;DOMContentLoaded&#39;,changeFontSize) //加载页面触发
    })()

登入後複製

###　　1、取得視窗寬度######　　2、以視窗寬度對標準的變化，設定html的font-size###

以上是rem絕對自適應方案解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！