1.flex

• 一個容器設置了display:flex;屬性就定義了一個flex容器，它的直接子元素會接受這個flex環(huán)境
  .container { display: flex; }

• 設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效

• flex兼容性如下圖:
  缺點:支持該屬性的瀏覽器版本并不多.

  
  
  image.png

flex參考

2.媒體查詢

常用的媒體類型有:

1. all（所有），適用于所有設備。
2. handheld（手持），用于手持設備。
3. print（印刷），用于分頁材料以及打印預覽模式下在屏幕上的文檔視圖。
4. projection（投影），用于投影演示文稿，例如投影儀。
5. 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 背景為灰色

代碼預覽

4.實現一個簡單的柵格系統(tǒng)

代碼預覽