響應式設計的優缺點
優點
解決了設備之間的差異化展示
缺點
兼容性代碼多，工作量大，加載速度受影響
對原有網站布局會產生影響，用戶判斷未必精確
響應式設計的原則
移動優先
在設計的初期就要考慮的頁面如何在多終端展示
漸進增強
充分發揮硬件設備的最大功能
實現響應式布局：
1.CSS3-Media Query（最簡單的方式）
CSS3-Media Query 常見屬性：
device-width,device-height —— 屏幕寬高（設備物理寬高）
width，height —— 渲染窗口寬高（實際寬高）
orientation —— 設備方向
resolution —— 設備分辨率
文檔小於等於480px的時候調用
<link type='text/css' rel='stylesheet' href='link.css' media='only screen and (max-width:480px)'/>
文檔大於等於480px的時候調用
@media screen and (min-width: 480px) {
body {
background: blue;
}
}
2.借助原生JavaScript（成本高，不建議使用）
3.第三方開源框架（可以很好的支持浏覽器響應式布局的設計）
Bootstrap高度組件化，使用時不要嘗試重新開發。
Bootstrap的核心是柵格化布局，要著重掌握。