響應式布局的實作
響應式布局指的是同一頁面在不同螢幕尺寸或者在不同的裝置下有不同的布局，能夠在大屏裝置以及小屏裝置獲得更好的浏覽體驗，簡單來說就是頁面适應終端而無需為每個終端制作單獨的頁面。
媒體查詢
通過使用CSS媒體查詢來實作響應式布局，針對不同的媒體類型設定不同的樣式規則，可以根據視窗、裝置高度與寬度、裝置方向、分辨率等進行不同CSS适配。
使用link連結
<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" type="text/css" href="example.css" media="all and (max-width:600px)"/> 響應式布局的實作
Meta标簽定義
使用viewport meta标簽在手機上控制布局
隐藏狀态欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" /> iPhone會将看起來像是電話号碼的數字添加連結，需要關閉
<meta name="format-detection content="telephone=no" /> 實作響應式布局
通過媒體查詢
@media screen and (max-width:320px) { }
@media screen and (min-width:320px) and (max-width:640px) { }
樣式表也可以引入外部的
@import url("css/demo.css") screen and (min-width:320px) and (max-width:640px);
@media screen and (min-width:640px) { } 當然，工作中是使用的外部樣式表
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 1000px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 600px) and (max-width: 1000px)">
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (max-width: 600px)"> 也許，你需要讓手機的螢幕橫着，比如你在玩王者榮耀
豎屏- 螢幕寬度小于高度
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
橫屏-螢幕寬度大于高度
<link rel="stylesheet" media="all and (orientation:landscape)" href="portrait.css"> 響應式布局缺點和優點
優點：面對不同分辨率裝置，靈活性強，能夠快捷地解決裝置顯示适應問題。缺點：相容各種裝置時所需工作量大、效率低下、代碼累贅，會隐藏無用的元素，加載時間延長，其實這是一種折中性質的設計解決方案，由于多方面元素影響而達不到最佳效果，在一定程度上改變了網站原有的布局結構，會出現使用者混淆的情況。
這裡有一個很嚴重的缺點
由于PC端和移動終端通路的是同一個網站，PC端可以不計較流量限制，但是移動端不可能不計較。
這裡主要是針對于圖檔的使用，為适配不同終端機型的螢幕寬度和像素密度，我們一般會使用如下方法設定圖檔的CSS樣式：
<style> img{ max-width:100%; height:auto; }</style> 将圖檔的最大寬度設定為100%，以確定圖像不會超出其父級元素的寬度，如果父級元素的寬度發生改變，圖檔的寬度也随之改變，height：auto 可以確定圖檔的寬度發生改變時，圖檔的高度會依據自身的寬高比例進行縮放。 這樣當我們在移動裝置上通路響應式網頁裡的圖檔時，隻是把圖檔的分辨率做了縮放，下載下傳的還是PC端的那張大圖，這樣不僅浪費流量，而且浪費帶寬，而且會拖慢網頁的打開速度，嚴重影響使用者的使用體驗。
解決方案：<picture>
如下栗子中針對不同螢幕寬度加載不同的圖檔；當頁面寬度 在320px到640px之間時加載minpic.png；當頁面寬度大于640px時加載middle.png
<picture>
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
<source media="(min-width: 640px)" srcset="img/middle.png">
<img src="img/picture.png" alt="this is a picture">
</picture> 如下例子中添加了螢幕的方向作為條件；當螢幕方向為橫屏方向時加載_landscape.png結尾的圖檔；當螢幕方向為豎屏方向時加載 _portrait.png結尾的圖檔；
<picture>
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
<source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
<source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
<img src="img/picture.png" alt="this is a picture">
</picture> 直接在CSS中使用
<!--
@media mediatype and|not|only (media feature){
/* css樣式 */
}
-->
<div id="t1"></div>
<style type="text/css">
@media screen and (min-width:600px){
#t1{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: red;
transition: all .5s;
}
}
@media screen and (max-width:600px) {
#t1{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: yellow;
transition: all .5s;
}
}
</style> 使用@import導入
/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px); 媒體類型
all: 用于所有裝置。print: 用于列印機和列印預覽。screen: 用于電腦螢幕，平闆電腦，智能手機等。speech: 應用于螢幕閱讀器等發聲裝置。
邏輯操作符
and: 表示且，當所有的條件滿足的時候傳回true。not: 是用來排除某種制定的媒體類型。only: 用來指定某種特定的媒體類型，可以用來排除不支援媒體查詢的浏覽器。,: 逗号用于将多個媒體查詢合并為一個規則，逗号分隔效果等同于or邏輯操作符。
媒體功能
aspect-ratio: 定義輸出裝置中的頁面可見區域寬度與高度的比率。color: 定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等于0。color-index: 定義在輸出裝置的彩色查詢表中的條目數，如果沒有使用彩色查詢表，則值等于0。device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的比率。device-height: 定義輸出裝置的螢幕可見高度。device-width: 定義輸出裝置的螢幕可見寬度。grid: 用來查詢輸出裝置是否使用栅格或點陣。height: 定義輸出裝置中的頁面可見區域高度。max-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最大比率。max-color: 定義輸出裝置每一組彩色原件的最大個數。max-color-index: 定義在輸出裝置的彩色查詢表中的最大條目數。max-device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最大比率。max-device-height: 定義輸出裝置的螢幕可見的最大高度。max-device-width: 定義輸出裝置的螢幕最大可見寬度。max-height: 定義輸出裝置中的頁面最大可見區域高度。max-monochrome: 定義在一個單色架構緩沖區中每像素包含的最大單色原件個數。max-resolution: 定義裝置的最大分辨率。max-width: 定義輸出裝置中的頁面最大可見區域寬度。min-aspect-ratio: 定義輸出裝置中的頁面可見區域寬度與高度的最小比率。min-color: 定義輸出裝置每一組彩色原件的最小個數。min-color-index: 定義在輸出裝置的彩色查詢表中的最小條目數。min-device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的最小比率。min-device-width: 定義輸出裝置的螢幕最小可見寬度。min-device-height: 定義輸出裝置的螢幕的最小可見高度。min-height: 定義輸出裝置中的頁面最小可見區域高度。min-monochrome: 定義在一個單色架構緩沖區中每像素包含的最小單色原件個數min-resolution: 定義裝置的最小分辨率。min-width: 定義輸出裝置中的頁面最小可見區域寬度。monochrome: 定義在一個單色架構緩沖區中每像素包含的單色原件個數。如果不是單色裝置，則值等于0。orientation: 定義輸出裝置中的頁面可見區域高度是否大于或等于寬度。resolution: 定義裝置的分辨率。scan: 定義電視類裝置的掃描工序。width: 定義輸出裝置中的頁面可見區域寬度。
機關
百分比機關
當度量機關設定為百分比時，即可使浏覽器元件寬高随着浏覽器的大小相應變化。
子元素的height或width中使用百分比，是相對于子元素的直接父元素，width相對于父元素的width，height相對于父元素的height。子元素的top和bottom如果設定百分比，則相對于直接非static定位的父元素的高度，同樣子元素的left和right如果設定百分比，則相對于直接非static定位父元素的寬度。子元素的padding如果設定百分比，不論是垂直方向或者是水準方向，都相對于直接父親元素的width，而與父元素的height無關。子元素的margin如果設定成百分比，不論是垂直方向還是水準方向，都相對于直接父元素的width。設定border-radius為百分比，則是相對于自身的寬度，還有translate、background-size等都是相對于自身的。
em機關
em是相對長度機關，相對于目前對象内文本的字型尺寸，若未設定則相對于浏覽器預設字型尺寸16px，em是會繼承父元素的字型的尺寸，使用時需要重新計算子元素的em值避免1.2*1.2=1.44的現象，使用em可以使元素根據字型大小的動态調整來制作響應式布局。
rem機關
rem機關都是相對于根元素html的font-size來決定大小的,根元素的font-size相當于提供了一個基準，當頁面的size發生變化時，隻需要改變font-size的值，那麼以rem為固定機關的元素的大小也會發生相應的變化。是以，如果通過rem來實作響應式的布局，隻需要根據視圖容器的大小，動态的改變根元素的font-size即可。
vh vw vmin vmax
vh: 相對于視窗的高度，1vh等于視窗高度的1%。vw: 相對于視窗的寬度，1vw等于視窗寬度的1%。vmin: vw和vh中的較小值。vmax: vw和vh中的較大值。
縮放比例
通過動态地控制網頁視圖的縮放比例來制作響應式布局。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" /> 自适應布局
自适應布局一般是通過檢測User-Agent來判斷目前通路的裝置是PC端還是平闆或者是手機，或者是通過檢測視窗分辨率而請求伺服器，進而服務端重定向或者傳回不同的頁面，需要開發多個頁面來适應不同的裝置，通常自适應布局與響應式布局并不是單獨使用的，可以通過開發一套PC端頁面與一套移動端頁面來實作自适應布局，而兩套頁面都實作對于不同範圍分辨率的響應式布局，可以避免過大的CSS樣式表又可以獲得較好的浏覽體驗，
![響應式布局案例-1[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)