大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 部落格園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的探索之旅吧！

網頁佈局

常見的網頁佈局方式分為以下四種：

1、固定寬度佈局：為網頁設定一個固定的寬度，通常以px做為長度單位，常見於PC端網頁。

2、流式佈局：為網頁設定一個相對的寬度，通常以百分比做為長度單位。

3、柵格化佈局：將網頁寬度人為的劃分成均等的長度，然後排版佈局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。

4、響應式佈局：通過檢測裝置資訊，決定網頁佈局方式，即使用者如果採用不同的裝置訪問同一個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。

注：以上幾種佈局方式並不是獨立存在的，實際開發過程中往往是相互結合使用的。"

1、響應式佈局

響應式佈局，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。

通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗，如下圖：

如上圖所示，螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用 媒體查詢

2、響應式佈局的缺點

我們利用響應式佈局可以滿足不同尺寸的終端裝置非常完美的展現網頁內容，使得使用者體驗得到了很大的提升，但是為了實現這一目的我們不得不利用媒體查詢寫很多冗餘的程式碼，使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題。

響應式佈局常用於企業的官網、部落格、新聞資訊型別網站，這些網站以瀏覽內容為主，沒有複雜的互動。

3、螢幕尺寸的劃分

一般我們會對常見的裝置尺寸進行劃分後，再分別確定為不同的尺寸的裝置設計專門的佈局方式，如下圖所示

4、媒體查詢

參考連結：http://www.runoob.com/cssref/css3-pr-mediaquery.html

使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。

@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

CSS 語法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code*/
}

/*或者引入不同樣式檔案的判斷：當滿足某個條件的時候，引入mystylesheet.css樣式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype 取值:

all 用於所有裝置

print 用於印表機和列印預覽

screen 用於電腦螢幕，平板電腦，智慧手機等。

speech 應用於螢幕閱讀器等發聲裝置

and|not|only：

and 同時滿足，相當於 &&；

not 取反（一般寫在 mediatype 前面）

示例：

<style>
  body{
    background-color: red;
  }
  /* 不在768-992之間的時候，設定背景顏色為藍色*/
  @media not screen and (min-width: 768px) and (max-width: 992px){
    body{
      background-color: blue;
    }
}
</style>

media feature 取值：（主要關注以下三個寬度）

device-height 定義輸出裝置的螢幕可見高度。

device-width 定義輸出裝置的螢幕可見寬度。

max-device-height 定義輸出裝置的螢幕可見的最大高度。

max-device-width 定義輸出裝置的螢幕最大可見寬度。

min-device-width 定義輸出裝置的螢幕最小可見寬度。

min-device-height 定義輸出裝置的螢幕的最小可見高度。

max-height 定義輸出裝置中的頁面最大可見區域高度。

max-width 定義輸出裝置中的頁面最大可見區域寬度。

min-height 定義輸出裝置中的頁面最小可見區域高度。

min-width 定義輸出裝置中的頁面最小可見區域寬度。

4.1、min-width 與 min-device-height 的區別

device 表示的是裝置，所以加了 device 的 範圍取值表示的是裝置的寬度範圍。

• 在移動端，由於通過模擬器改變的是移動端裝置的寬度，所以 min-width 與 min-device-height 效果一樣；
• 在 PC 端，如果改變瀏覽器的寬度，而我們電腦的寬度並沒有改變，所以裝置的寬度一定，最終的效果就是隻有一個範圍起作用。

4.2、案例：控制不同螢幕尺寸下螢幕背景色,

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的新增*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等螢幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

4.3、媒體查詢條件判斷的順序

原因：如果結構如上面示例的那樣，並且媒體查詢條件由重疊的話，後面的媒體查詢樣式設定會覆蓋前面的媒體查詢設定，為了避免發生這種情況，我們就應該遵循一定的規律，使得不同的媒體查詢條件下，執行不同的樣式，而不會發生衝突。

特點：

向上相容：如果設定了寬度更小時的樣式，預設這些樣式也會傳遞到寬度更大的條件範圍內.

向下覆蓋：寬度更大的樣式會將前面寬度更小的樣式覆蓋

書寫建議：

• 如果是判斷最小值 (min-width)，那麼範圍就應該從小到大寫
• 如果是判斷最大值 (max-width)，那麼範圍就應該從大到小寫

例如：

@media screen and (min-width: 768px){
  body{
    background-color: green;
  }
}
!*w:992!1200 blue  min-width: 992px:當螢幕的寬度大於等於992的時候*!
@media screen and (min-width: 992px){
  body{
    background-color: blue;
  }
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
  body{
    background-color: pink;
  }
}