响应式布局的各种基础操作

0.基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
1.传统固定布局：
实现方法：用width和height指定宽高px值、以及float浮动
缺点：有空白、且无法随浏览器窗口变化而调整大小和布局
2.百分比布局：
实现方法：用width和height指定宽高%值，以及float浮动
缺点：有空白
3.Flex伸缩布局：
实现方法：

3.1.给容器元素设置display:flex属性
      3.2.通过给【项目】(容器内子元素)的flex属性，来设置项目比例。例如项目A的flex:1,项目B的flex:2，表示A与B的宽度为1:2
      3.3.flex-direction排列方向（主轴）:
           row:               默认.把项目排列的主轴设置为水平方向，从左到右
           row-reverse:     水平方向，从右到左
           column:               垂直方向，从上到下
           column-reverse:     垂直方向，从下到上
      3.4.flex-wrap单行/多行:
           nowrap:               默认.不换行
           wrap:               换行
           wrap-reverse:     倒序换行
      3.5.justify-content主轴对齐方式:
           flex-start:          向主轴起始位置靠拢对齐
           flex-end:          向主轴结束位置靠拢对齐
           center:               主轴方向居中
           space-between:     两头对齐（中间空白）
           space-around:     平均分布（两头、中间空白）
      3.6.align-items侧轴对齐方式:
           flex-start:          向主轴起始位置靠拢对齐
           flex-end:          向主轴结束位置靠拢对齐
           center:               主轴方向居中兼
           baseline:          两头对齐（中间空白）
           stretch:          平均分布（两头、中间空白）

4.响应式布局方案：

 4.1.媒体类型：all、screen、print、tv、projection等
 4.2.引入媒体类型两种方式：
      @media print{
           div{height:10px}
      }
    
          <link rel="stylesheet" href="style1.css" media="print"/>
     4.3.媒体特性
          max-width:          最大宽度
          min-width:         
          device-width:     设备屏幕输出宽度
          device-height:     设备屏幕输出高度
          width:               渲染界面宽度
          height:               渲染界面高度
          orientation:     portrait横屏/landspace竖屏
          resolution:          分辨率
          color:               每种色彩字节数
          color-index:     色彩表中的色彩数
     4.4.媒体查询语法：
          @media [and/only/not] 媒体类型 and/only/not (媒体特性) {样式}
          【举例】：
          1.样式用于电脑显示屏和屏幕宽度小于1200px的设备
          @media screen and (max-width:1200px){样式}
         
          2.用于浏览器兼容。用于支持媒体类型(screen)却不识别媒体特性(max-width)的老浏览器
          <link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/>
         
          3.样式用于除打印机和屏幕小于1200px之外的所有设备
          @media not print and (max-width:120px){样式}
5.响应式布局设计模式
     布局不变，
          内容挤压-拉伸
          换行-平铺
          增减内容
     布局改变
          模块位置变换
          模块展示方式改变
          模块数量改变
         
6.响应式布局两个前提：
     6.1.能自动调整布局（弹性布局）
     6.2.能自动感知设备大小