移动端总结

测试的demo在github上：https://github.com/fei1314/mobileDesign/tree/master

一、移动端
  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                         ?