概念
Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
步驟
1. 設置 Meta 標簽
大多數移動瀏覽器將html頁面放大為寬的視圖（viewport）以符合屏幕分辨率，可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度，按1：1的尺寸顯示並禁止初始的縮放。在<head>標簽里加入這個meta標簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2.通過媒體查詢來設置樣式Media Queries
Media Queries 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那么可以這樣寫:
// 這里面的樣式會覆蓋掉之前所定義的樣式 @media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }
3.設置多種視圖寬度
假如我們要兼容ipad和iphone視圖，我們可以這樣設置：
/**ipad**/ @media only screen and (min-width:768px)and(max-width:1024px){} /**iphone**/ @media only screen and (width:320px)and (width:768px){}
4.字體設置
到目前為止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，但是我們仍然需要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。
css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。rem是相對於根元素的，不要忘記重置根元素字體大小：
html{font-size:100%;} 完成后，你可以定義響應式字體： @media (min-width:640px){body{font-size:1rem;}} @media (min-width:960px){body{font-size:1.2rem;}} @media (min-width:1200px){body{font-size:1.5rem;}}5.注意事項
寬度需要使用百分比
#head { width: 100% } #content { width: 50%; }處理圖片縮放的方法
給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小；假如圖片小了，就原尺寸輸出:
img { width: auto; max-width: 100%; }
用::before和::after偽元素 +content 屬性來動態顯示一些內容。在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能。
// HTML 結構 <img src="image.jpg" >600px="image-600px.jpg" >800px="image-800px.jpg" alt=""> // CSS 控制： @media (min-device-width:600px) { img[>600px] { content: attr(>600px, url); } } @media (min-device-width:800px) { img[>800px] { content: attr(>800px, url); } }
除了img標簽的圖片外我們經常會遇到背景圖片，比如logo為背景圖片：
#log a{ display:block; width:100%; height:40px; text-indent:55rem; background-img:url(logo.png); background-repeat:no-repeat; background-size:100% 100%; } // background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width，第2個值用於指定背景圖的height，如果只指定一個值，那么另一個值默認為auto。 // background-size:cover; 等比擴展圖片來填滿元素 // background-size:contain; 等比縮小圖片來適應元素的尺寸廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
其他屬性
例如 pre ，iframe，video 等，都需要和img一樣控制好寬度。對於table，建議不要增加 padding 屬性，低分辨率下使用內容居中：
table th, table td { padding: 0 0; text-align: center; }