1.flex
一个容器设置了display:flex;属性就定义了一个flex容器，
它的直接子元素会接受这个flex环境
.container { display: flex; }设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
-
flex兼容性如下图:
缺点:支持该属性的浏览器版本并不多.
image.png
2.媒体查询
常用的媒体类型有:
- all（所有），适用于所有设备。
- handheld（手持），用于手持设备。
- print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
- projection（投影），用于投影演示文稿，例如投影仪。
- screen（屏幕） ，主要用于计算机屏幕。
在使用的时候可以在样式表直接书写 @media指令+空格+媒体类型（多个逗号隔开）
有以下常用的media feature
width：浏览器宽度
height：浏览器高度
device-width：设备屏幕分辨率的宽度值
device-height：设备屏幕分辨率的高度值
orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
如何引入media:有两种常用的引入方式
- link方法引入
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
- @media引入
@media screen and (min-width: 600px) and (max-width: 800px){
选择器{
属性：属性值；
}
}
CSS2:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}
CSS3:
@media screen and (max-width: 990px){
.container{
background: orange;
}
}
3.用媒体查询实现如下要求
1. 在页面宽度> 1200px 时页面背景为红色
2. 在页面1200px>=宽度> 900px 时页面背景为绿色
3. 在页面900px>=宽度> 600px 时页面背景为黄色
4. 宽度<=600px 背景为灰色
