响应式布局

一、媒体查询:@media

​ 1. 概念： 为不同尺寸的屏幕设定不同的CSS样式

​ 常用参数：

属性名称	作用
width,height	浏览器的可视宽度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

​ 2.示例:

<style>
    #div0{
        width: 150px;
        height: 200px;
    }
    /*设备在100px到300px之间是红色*/
    @media screen and (min-device-width:100px) (max-device-width:300px) {
        #div0{
            background-color: red;
        }
    }
    /*浏览器可视宽度在500px到700px之间是红色*/
    @media screen and (min-width:500px) and (max-width:700px) {
    	#div0{
        	background-color: red;
   		}
	}
    /*浏览器可视宽度在700px以上是蓝色*/
	@media screen and (min-width:701px) {
    	#div0{
        	background-color: blue;
    	}
	}
</style>

<style>
    #div0 {
        width: 100%;
        height: 500px;
    }

    #div0 div {
        float: left;
        height: 100px;
    }
    /* 一行显示三个 */
    @media screen and (min-device-width:400px) and (max-device-width:500px) {
        #div0 div {
            width: 33.3%
        }

        #div0 div:nth-child(1) {
            background-color: red;
        }

        #div0 div:nth-child(2) {
            background-color: blue;
        }

        #div0 div:nth-child(3) {
            background-color: green;
        }
    }
    /* 一行显示两个 */
    @media screen and (min-device-width:300px) and (max-device-width:399px) {
        #div0 div {
            width: 50%;
        }
        #div0 div:nth-child(1) {
            background-color: red;
        }
        #div0 div:nth-child(2) {
            background-color: blue;
        }

        #div0 div:nth-child(3) {
            background-color: green;
        }
    }
    /* 一行显示一个 */
    @media screen and (min-device-width:200px) and (max-device-width:299px) {
        #div0 div {
            width: 100%;
        }
        #div0 div:nth-child(1) {
            background-color: red;
        }

        #div0 div:nth-child(2) {
            background-color: blue;
        }

        #div0 div:nth-child(3) {
            background-color: green;
        }
    }
</style>

3.媒体查询其它引入方式

​ （1）style标签 写在style标签中，有条件的执行某个内部样式表

​ 示例：

<style media="(min-device-width:100px) and (max-device-width:300px)">
    #div0{
        background-color:red;
    }
</style>

​ (2)link引入 写在link标签中，有条件的引入外部样式表

​ 示例：

<link href="css/test.css" rel="stylesheet">
<link href="css/css-1.css" rel="stylesheet"
      media="(min-device-width:100px) and (max-device-width:300px)">

二、flex弹性布局

​ 1. 概念：弹性布局，配合rem处理尺寸的适配问题

​ 2. flex-主轴方向与换行

​ （1）flex-direction 子元素在父元素盒子中的排列

属性值	作用
row	默认值，从左到右顺序显示
row-reverse	与row相同，但是以相反的顺序
column	项目垂直显示，从上到下
column-reverse	与column相同，但是以相反的顺序

示例：

#div0{
	display:flex;
	flex-direction:row;
}

​ (2) flex-wrap 子元素在父元素盒子中是否换行（列）

属性值	作用
nowrap	默认值。不换行不换列
wrap	换行或换列
wrap-reverse	换行或换列，但以相反的顺序

​ (3) flex-flow flex-direction和flex-wrap属性的简写

​ 语法：flex-flow: ||

3. flex-剩余空间调整为间距

   ​ （1）justify-content 用来存在剩余空间时，设置为间距的方式

   属性值	作用
   flex-start	默认值。从左到右，挨着行的开头
   flex-end	从左到右，挨着行的结尾
   center	居中显示
   space-between	平均分布在该行上，两边不留间隔空间
   space-around	平均分布在该行上，两边留有一半的间隔空间

   4. flex-交叉轴的对齐方式

   ​ (1) align-items 设置每个flex元素在交叉轴上的默认对齐方式

   属性值	作用
   flex-start	位于容器开头
   flex-end	位于容器结尾
   center	居中显示

   ​ (2) align-content 与align-items作用相同，但是区别在于align-content是整体向上或者向下或整体居中

   属性值	作用
   flex-start	位于容器开头
   flex-end	位于容器结尾
   center	位于容器中心
   space-between	之间留有空白
   space-around	两端都留有空白

   5. flex-给子元素设置伸缩比例flex属性

   其它属性：

   属性值	作用
   flex-basis	设置弹性盒伸缩基准值,设置这个width就不生效了
   flex-grow	设置弹性盒子的扩展比率，这个表示所占的份数（前提：有剩余空间）
   flex-shrink	设置弹性盒子的缩小比率，0为不允许缩小
   flex	flex-grow,flex-shrink,flex-basis的缩写

   6. 特殊写法

      属性	作用
      flex: auto;	flex: 1 1 auto
      flex: none;	flex: 0 0 auto
      flex: 0%; flex: 100px;	flex: 1 1 0% flex: 1 1 100px;
      flex: 1;	flex: 1 1 0%

      三、常用布局

      ​ 1.rem使用方法：相对于根元素的字体大小的单位

      ​ 2.自适应布局：不同设备对应不同的html，局部自适应

      ​