【angularjs】使用ionic+angular 搭建移動端項目,字體適配


解析:

    首先,rem是以html為基准。

    一般的,各大主流瀏覽器的font-size默認值為16px,此時1rem=16px。如果此時將rem與px進行換算很麻煩,比如0.75rem=12px。

    為了更方便的進行換算(比如1:10),就可以加樣式:

    html,body{
      font-size: 62.5%;  
    }

    設置了62.5%以后就有 1rem=10px,便於用rem指定元素的尺寸(比如1.2rem=12px,1.4rem=14px),這樣響應式的時候就可以直接改變font-size而無需計算其他各種樣式中出現的尺寸了。

    用rem定義尺寸的另一個好處是更能適應 縮放/瀏覽。

    至於選擇62.5%而非10px的原因,主要是兼容性和未來發展趨勢的綜合考慮,px這個單位的含義已經越來越混亂,幾乎無法評估以后的設備是會一直像現在這樣對網頁上的px做兼容處理,還是讓px回歸“像素”的本意,

  但62.5%代表默認字體尺寸的62.5%這個含義基本不會有混亂。

應用: 

  html,body{
     font-size: 62.5%;  
  }

 ps:實際項目中uI給的設計圖為二倍圖,計算規則: 設計圖尺寸/20 

 拓展:移動端的設計圖為什么是二倍圖?

  網頁設計圖紙設計的是:物理像素,即:屏幕實際的像素點;

  移動端顯示的是:邏輯像素,即:手機屏幕可以現實的像素點。

  例如:iPhone6 采用了 750*1334 分辨率的屏幕,邏輯像素是375*667。

 

作者:smile.轉角

QQ:493177502


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM