從零開始學 Web 之 移動Web（六）響應式佈局

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

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！

網頁佈局

常見的網頁佈局方式分爲如下四種：

一、固定寬度佈局：爲網頁設置一個固定的寬度，一般以px作爲長度單位，常見於PC端網頁。

二、流式佈局：爲網頁設置一個相對的寬度，一般以百分比作爲長度單位。

三、柵格化佈局：將網頁寬度人爲的劃分紅均等的長度，而後排版佈局時則以這些均等的長度作爲度量單位，一般利用百分比作爲長度單位來劃分紅均等的長度。

四、響應式佈局：經過檢測設備信息，決定網頁佈局方式，即用戶若是採用不一樣的設備訪問同一個網頁，有可能會看到不同的內容，通常狀況下是檢測設備屏幕的寬度來實現。

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

一、響應式佈局

響應式佈局，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。

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

如上圖所示，屏幕尺寸不同展現給用戶的網頁內容也不同，咱們利用 媒體查詢 能夠檢測到屏幕的尺寸（主要檢測寬度），並設置不一樣的CSS樣式，就能夠實現響應式的佈局。

二、響應式佈局的缺點

咱們利用響應式佈局能夠知足不一樣尺寸的終端設備很是完美的展示網頁內容，使得用戶體驗獲得了很大的提高，可是爲了實現這一目的咱們不得不利用媒體查詢寫不少冗餘的代碼，使總體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。

響應式佈局經常使用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互。

三、屏幕尺寸的劃分

通常咱們會對常見的設備尺寸進行劃分後，再分別肯定爲不一樣的尺寸的設備設計專門的佈局方式，以下圖所示

類型	佈局寬度
大屏幕	>= 1200px
默認	>= 980px
平板	>= 768px
手機到平板之間	<= 767px
手機	<= 480px

四、媒體查詢

參考連接：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.一、min-width 與 min-device-height 的區別

device 表示的是設備，因此加了 device 的 範圍取值表示的是設備的寬度範圍。

• 在移動端，因爲經過模擬器改變的是移動端設備的寬度，因此 min-width 與 min-device-height 效果同樣；
• 在 PC 端，若是改變瀏覽器的寬度，而咱們電腦的寬度並無改變，因此設備的寬度必定，最終的效果就是隻有一個範圍起做用。

4.二、案例：控制不一樣屏幕尺寸下屏幕背景色,

<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.三、媒體查詢條件判斷的順序

緣由：若是結構如上面示例的那樣，而且媒體查詢條件由重疊的話，後面的媒體查詢樣式設置會覆蓋前面的媒體查詢設置，爲了不發生這種狀況，咱們就應該遵循必定的規律，使得不一樣的媒體查詢條件下，執行不一樣的樣式，而不會發生衝突。

特色：

向上兼容：若是設置了寬度更小時的樣式，默認這些樣式也會傳遞到寬度更大的條件範圍內.

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

書寫建議：

• 若是是判斷最小值 (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;
  }
}