移動端總結

測試的demo在github上：https://github.com/fei1314/mobileDesign/tree/master

1、移動端
  1.viewport（視口）:根據瀏覽器的分辨率自適應
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">

    width=device-width:寬度等於設備的寬度，根據不一樣的設備而定
    user-scalable=no：user-scalable表明是否容許用戶縮放，他的值爲布爾值，no表示不容許用戶縮放頁面
    initial-scale=1.0：表示初始的縮放比例
    minimum-scale：最小的縮放比例
    maximum-scale:最大的縮放比例

  2.新的盒模型
    box-sizing:border-box/content-box
      border-box:width/height包括border padding
      content-box:width/height不包括border padding
  3.彈性盒模型
    父級：display:flex;
    子級:flex:1
    原理:可用總寬度-固定佔的寬度=剩餘空間
        剩餘空間*flex/flex_sum=width
  4.媒體查詢
    @media (條件){
      css代碼   //注意優先級
    }
  5.rem
    rem     相對根元素的字體大小(html)
    em      相對字體大小        font-size:12px; width:2em =>  width:24px;

      目標：全部的東西都能跟着屏幕大小變化(儘可能簡單)
      方法：全部的尺寸都寫成rem，只須要改html的fontSize

      原理:針對不一樣設備，寬度不一樣，須要一個基準屏幕，來根據不一樣設備計算出對應不一樣設備的寬度。
          假如基準屏幕寬度是375px（隨本身定）,html字體大小20px(隨本身定).已知設備的真實寬度clientWidth,根據對應規律，就可算出對應的真實寬度的字體大小

          基準屏幕                          真實屏幕
          寬    375                        clientWidth
          字體  20                         ?