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絕對自適應方案