隨著網際網路時代的發展，我們對網頁佈局有了新的要求，大氣，美觀，能夠在不同的裝置上呈現令人煥然一新的效果。此時，一個全新的概念—響應式佈局應運而生。它的誕生為我們的移動端佈局帶來了很大的便利。因此學習響應式頁面佈局勢在必行！

一、響應式頁面佈局的概念

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽器而誕生的。

二、響應式佈局的優勢

響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

三、響應式佈局網站案例（如下圖所示）：

核心知識點

v 彈性盒模型

v 媒體查詢

四、彈性盒模型

彈性盒佈局模型是css3規範中提出的一種新的佈局方式。

目的：提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間

優勢：這種佈局模式已被主流瀏覽器所支援，可以在web應用開發中使用。

說明：

1.flex是display的一個屬性值。

2.設定了display:flex屬性的元素，稱為Flex容器，他裡面的所有子元素統稱為容器成員，稱為Flex專案。後面我們就使用Flex容器和 Flex專案來進行介紹。 Flex容器有兩根座標軸：主軸（main axis）和交叉軸

Flex容器屬性

flex-direction: row | row-reverse | column | column-reverse;

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

justify-content 定義了Flex專案在主軸方向上的對齊方式

flex-start | flex-end | center | space-between | space-around;

justify-content:flex-start;

justify-content：flex-end;

justify-content：flex-center;

justify-content：space-between;

justify-content：space-around;

align-items：flex-start | flex-end | center | baseline | stretch; 定義專案在交叉軸上的對齊方式(適用於父類容器【彈性盒子】元素上)

align-items：flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

align-items:stretch;

五、媒體查詢

1.什麼是媒體查詢

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

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

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

2.媒體查詢的作用

可以在不改變頁面內容的情況下，為特定的一些輸出裝置定製顯示效果，是響應式佈局實現的主要方式

3.媒體查詢的語法

v 外聯css語法：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體型別：mediatype

關鍵字：and|not|only

媒體特徵：media feature

例項：

<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />

v 內嵌樣式的語法：

@media mediatype and|not|only (media feature) { ... }

媒體型別：mediatype

關鍵字：and|not|only

媒體特徵：media feature

@ media  screen  and  (max-width: 960px){
    body
{

@ media  screen  and  (max-(min-width:960px)  and  (max-width:1200px){
    body{
        background:yellow;
  }

四、課堂案例

下面是一個響應式佈局的簡單案例

導航部分：

1） 導航部分由logo，導航和登入三部分組成，這三部分放置在一個header的父容器中，給header設定display：flex；使之成為彈性盒模型，並設定主軸方向為row，子元素在父容器中的對齊方式為兩端對齊。

2） 當視窗小於等於640px時，將導航隱藏，新增媒體查詢

圖片列表部分

1） 所有的圖片都放置在一個class名為picture的父容器中，給父容器新增display:flex；使之成為彈性盒模型，並設定子元素的對齊方式為居中對齊（justify-content:center;）,並設定每一個子元素佔據父元素的25%，溢位換行顯示。

2） 新增媒體查詢， 當視窗小於640px時，每行放置兩張圖片，即每個子元素佔據50%；

綜上所述，掌握了彈性盒模型和媒體查詢，我們就可以很輕鬆的只做出一個響應式的網站。

來源：千鋒HTML5