1. 程式人生 > >rem絕對自適應方案

rem絕對自適應方案

block 比例 log func 不同 無法 nts calc 簡單

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 = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘;

      function changeFontSize(){
        var clietWidth = doc.offsetWidth,
            scale = clietWidth/768;   //以768為標準

        doc.style.fontSize = scale * 16 + ‘px‘;
      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小變化或者手機橫屏
      document.addEventListener(‘DOMContentLoaded‘,changeFontSize) //加載頁面觸發
    })()

  1、獲取視口寬度

  2、以視口寬度對標準的變化,設置html的font-size

rem絕對自適應方案