一、什么是響應式布局？
??響應式布局就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
??響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
二、響應式布局的優點和缺點有哪些呢？
?(1) 優點 ：1. 面對不同分辨率設備靈活性強
?????????? 2. 能夠快捷解決多設備顯示適應問題
?(2) 缺點 ：1.不能完全兼容所有瀏覽器，代碼累贅，會出現隱藏無用的元素,加載時間加長
???????????2. 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況。
三、實現原理？
??原理：簡單點說響應式布局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端設備寬度在多少像素內，然后就執行與之對應的CSS樣式。
四、用示例來實踐一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應式布局</title>
<style>
body {
background-color: #ccc;
}
@media screen and (max-width: 1000px) {
body {
background-color: red;
}
}
@media screen and (max-width: 800px) {
body {
background-color:green;
}
}
@media screen and (max-width: 600px) {
body {
background-color: skyblue;
}
}
@media screen and (max-width: 400px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
這就是簡單的響應式布局示例
</body>
</html>
??看完我寫的示例，你可以試著敲一下在瀏覽器里運行，然后縮小瀏覽器窗口，你就會發現網頁的顏色會隨著你的瀏覽器窗口寬度變化而變色，這就是css的媒體查詢功能，根據瀏覽器視口寬度的不同來加載不同的css樣式。
??值得注意的是：在手機設備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。
??禁止代碼如下：
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
（注意的是在頁面的頭部<head></head>之間加上上面這句。meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。）
?參數設置∶
????width – viewport的寬度
????height – viewport的高度
????initial-scale – 初始的縮放比例
????minimum-scale – 允許用戶縮放到的最小比例
????maximum-scale – 允許用戶縮放到的最大比例
????user-scalable – 用戶是否可以手動縮放
五、注意事項
??響應式布局一定要注意以下兩點：
????一 是圖片，在移動設備上，要做一些特定適合的小圖片來匹配，如果單純使用壓縮的圖片會失真，影響用戶體驗；
????二 是在頭部加入如下代碼，目的是聲明在移動設備上設置原始大小顯示和是否縮放
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
??最后說一下通過媒體查詢來加載不同的css，這是響應式布局的核心，媒體查詢的方法當然也有很多，如果有興趣深入了解，大家也可以自行百度一下。
