移动端兼容：


  布局兼容  
    1：媒体查询
    2：flex

  尺寸兼容
    1：100%  
    2: rem  

                        2  * 50
    真实的尺寸 =  你写的rem数值  *  html上的基准数值（font-size）


flex

  新布局方式，可以实现更多的多终端兼容效果

  13 css属性

  display: flex

  应用在父元素上 6个
   justify-content 设置元素在 X 轴上的对齐方式
   flex-wrap 设置元素一行放不下的时候是否换行
   align-content 设置元素在 Y 轴上的对齐方式（多行）
   align-items 设置元素在 Y 轴上的对齐方式（单行）
   flex-direction 设置元素的排列方向，注意如果设置了column（垂直），那么 justify-content 和 align-items
                  作用相反。
   
   
   flex-flow:  flex-direction  flex-wrap         

  应用在子元素上 6个 
    order: 设置元素的顺序，数值越小越靠前
    flex-basis 设置元素的宽度，类似width
    align-self


    flex-grow 设置元素的放大比例，数值越大，所占空间越大
    flex-shrink  设置元素的缩小比例，数值0，不缩放
    flex:  none(flex-grow) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]