1：媒体查询（响应式开发）

2：弹性盒子 +  rem（手机网站的尺寸单位）


为什么需要？？？？

   以前的做法：写一个pc网站，然后通过  媒体查询  技术，来兼容 pc 和  手机
     媒体查询：实时检测屏幕的宽度变化，然后显示或者隐藏网页上的元素，让pc网站适配手机

   现在的做法：写两个网站，一个pc，一个手机网站

  pc网站

  手机网站


rem: 
  相对的尺寸单位，为了实现尺寸上的兼容
   

  1.875rem 你写的尺寸（rem）  *   html上font-size = 真实的尺寸  160px

  html上font-size 需要动态去变化的
  那如何变化？

    媒体查询

    js


弹性盒子：

  布局兼容

  有两个轴 ，主轴x  和  交叉轴 y

  13个css属性：

    7个在父元素上：

      display: flex  开启弹性盒子


      flex-direction  改变默认的排列方向  row  column，注意 如果设置了 column，那么 align-items 和 
                      justify-content 作用相反

      flex-wrap  排不下换行（注意，子元素自己加宽度）
      justify-content  设置水平居中
      align-items  垂直居中
      
      align-content 设置多行结构的  垂直居中

       flex-flow  是flex-direction属性和flex-wrap属性的简写形式



    6个在子元素上：

     flex-grow 定义元素的放大比例，数值越大占比越大
     flex  一般设置一个数值，实际作用约等于  flex-grow

     flex-shrink 定义元素的缩小比例，0 不缩放  1 默认缩放

      order   排列顺序，数值越小越靠前
     

      flex-basis
      
      align-self  允许某个元素脱离 align-items 的规则来对齐