rem適配方案

G_Owen發表於2018-09-10
REM

  頁面佈局單位計算 一般有兩大類：絕對長度單位和相對長度單位

　　絕對長度單位：

    • px 畫素：是螢幕上顯示的每一個小點，為顯示的最小單位
    • in 英寸，1in = 96px
    • cm 釐米，1cm = 37.8px
    • mm 毫米，1mm = 3.78px
    • pt 磅，1pt = 1/72 英寸

 　　推薦使用  px（畫素）

　　相對長度單位：

    • em　相對於當前元素的字型大小(font-size) ,當前元素未設定字型大小依賴其父元素字型大小一級級向上查詢 1em= 1 × 當前元素字型大小;
    • rem   相對於根元素的字型大小(font-size),計算公式 1rem =1 ×  根元素字型大小;
    • %     目標元素寬度/父級元素寬度=百分比寬度 ;
    • ex & ch  相對於元素字元字型寬高
      • ex 　取自字元x的高度
      • ch    基於`0`這個字元字型的寬度計算
    • vw & vh  　根據 視口(瀏覽器視覺化的區域) 的寬高計算 
      • vw  當前視窗寬度的 1%
      • vh   當前視窗高度的 1%
    • vmin & vmax 當前vw和vh中較小或者較大的值

  目前 IE8一下不支援 rem,IE9,10部分不支援

   如果這個屬性根據它的font-size進行測量，則使用em

   其他的視情況使用對應單位.

rem 幾種方法: 

js計算

 1    <script>
 2   /*讓文字和標籤的大小隨著螢幕的尺寸變化 等比縮放*/
 3     var html = document.getElementsByTagName(`html`)[0];
 4    
 5     /*取到螢幕的寬度*/
 6     var width = window.innerWidth;
 7     var fontSize = 100/640*width;
 8     html.style.fontSize = fontSize +`px`;
 9     window.onresize = function(){
10         var html = document.getElementsByTagName(`html`)[0];
11   
12         var width = window.innerWidth;
13   
14         var fontSize = 100/640 * width;
15         /*設定fontSize*/
16         html.style.fontSize = fontSize +`px`;
17     }
18 </script>

 使用媒體查詢:

@media (max-width:768px){
    html {
　　　　font-size:16px;
　　}
}

 

相關文章