rem絕對自適應方案
阿新 • • 發佈：2017-10-11
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絕對自適應方案