rem絕對(duì)自適應(yīng)方案解析

　　使用這個(gè)單位可以創(chuàng)建完美的可擴(kuò)展布局，只需根據(jù)頁(yè)面大小去修改html的font-size，就能達(dá)到適配整個(gè)頁(yè)面的目的。那么問(wèn)題來(lái)了，如何使html的font-size自適應(yīng)呢？

媒體查詢(xún)

　　media的用法這里就不贅述，簡(jiǎn)單說(shuō)明通過(guò)媒體查詢(xún)修改html的font-size以達(dá)到頁(yè)面自適應(yīng)的目的。

　　　　html如下：

 <article class="container">
 <ol>
 <li>rem是相對(duì)于root元素(html)字體大小的一個(gè)單位。 eg:html默認(rèn)font-size為16px 則1rem = 16px</li>
 <li>若元素以rem為單位去設(shè)置字體、寬高、邊距等。則修改html字體大小就能達(dá)到所有元素一起等比例修改的效果</li>
 <li>所以要實(shí)現(xiàn)html字體在不同頁(yè)面大小下自適應(yīng)</li>
 </ol>
 </article>

　　　　css如下：

//媒體查詢(xún)控制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;
 }
 }

//頁(yè)面元素的簡(jiǎn)單樣式
 .container{
 padding: 1rem;
 }
 li{
 font-size: 1rem;
 }

　　通過(guò)媒體查詢(xún)，在不同大小區(qū)間的頁(yè)面上，設(shè)置html的font-size都不一樣；

　　頁(yè)面寬度為700px時(shí)，html的字體大小為14px，此時(shí) 1rem = 14px ，li元素的字體大小就是14px，包裹的內(nèi)邊距也是14px；改變頁(yè)面寬度為800px，html的字體大小為16px，此時(shí) 1rem = 16px ，li元素的字體大小變?yōu)?6px，包裹的內(nèi)邊距也變?yōu)?6px；

　　這種方式當(dāng)然媒體查詢(xún)劃分的越細(xì)致，自適應(yīng)越強(qiáng)，但是無(wú)法實(shí)現(xiàn)完全自適應(yīng)，只是區(qū)間性的。

vw

　　vw代表的視口的 1/100 100vw代表的即是視口的寬度。使用它我們就可以實(shí)現(xiàn)html的font-size完全自適應(yīng)了。

　　css如下：

 html{
 font-size: calc(16/768*100vw); //以768時(shí)16px為標(biāo)準(zhǔn)進(jìn)行縮放
 }

　　例子的768px為一個(gè)假設(shè)的標(biāo)準(zhǔn)值，一般設(shè)計(jì)稿的大小為標(biāo)準(zhǔn)，然后再進(jìn)行適配。調(diào)節(jié)頁(yè)面大小，可以完全自適應(yīng)。

JS調(diào)整

　　加載頁(yè)面和調(diào)整窗口大小的時(shí)，設(shè)置html的字體大小，已達(dá)到自適應(yīng)的目的。

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

 function changeFontSize(){
 var clietWidth = doc.offsetWidth,
 scale = clietWidth/768; //以768為標(biāo)準(zhǔn)

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

 if (!doc.addEventListener) return;

 window.addEventListener(resizeEvt,changeFontSize) //窗口大小變化或者手機(jī)橫屏
 document.addEventListener('DOMContentLoaded',changeFontSize) //加載頁(yè)面觸發(fā)
 })()

　　1、獲取視口寬度

　　2、以視口寬度對(duì)標(biāo)準(zhǔn)的變化，設(shè)置html的font-size

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com