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 背景為灰色
