<article class="container">
 <ol>
 <li>rem是相對于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īng)</li>
 </ol>
 </article>

//媒體查詢控制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: calc(16/768*100vw); //以768時(shí)16px為標(biāo)準(zhǔn)進(jìn)行縮放
 }

 (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) //加載頁面觸發(fā)
 })()