響應式佈局應該包括以下幾點：
1、CSS3.0媒介查詢；
我們所做的html文件都是在瀏覽器的解析下顯示的，在PC端，在手機瀏覽器中都是可以的，唯一所不同的就是瀏覽器的視界窗口不同而已。在css3中使用媒體查詢，可以在不改變頁面內容的情況下，爲特定的一些輸出設備定製顯示效果。我們所要做的就是在頁面中的<head>標籤之中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ；
當然我們的css3媒介查詢是建立在支持css3的基礎上，支持CSS3的瀏覽器的情況看下圖；
再看下css3.0媒介查詢的使用，通過在不同寬度的情況下，使用不同的樣式，頁面自適應佈局；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
<title>改變窗口大小有驚喜</title>
<style type="text/css">
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<p>改變窗口大小有驚喜喲！</p>
</body>
</html>2、百分比對應絕對像素寬度；
在響應式佈局中，我們一般會使用max-width屬性來約束頁面的最大寬度，然後在此情況下做百分比寬度；當然這個百分比的使用，遵循一個原則：目標元素寬度÷上下文元素寬度=百分比寬度，如我們總的寬度在980px的情況下再定位一個居中塊級寬度爲960px的元素，這時候用960/980 得到即爲百分比的數值；
3、字體單位em對應覺得像素px；
字體的定值大小不能爲絕對像素px，要用相對像素單位em，具體計算方式請參閱這片博客，做一個引路人強大的em;
4、自適應圖片；
自適應圖片屬性：
img {
border: 0;
max-width: 圖片本來像素大小
width: 百分比
}5、display屬性的靈活利用；
在移動前端佈局中，display屬性可以簡化很多複雜的佈局，上一篇博客講到細說CSS中的display屬性，另外我們還提供一種自適應佈局，display: flex；具體請參考flex屬性；
6、萬能的max-width；
max-width的使用其實很簡單,靈活使用可以使我們的頁面適應不那麼僵硬！
