<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>

//媒體查詢控制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時16px為標準進行縮放
 }

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