什么是響應式設(shè)計？
1.讓一個網(wǎng)站可兼容不同分辨率的設(shè)備
2.給用戶更好的視覺體驗
響應式布局的優(yōu)點和缺點
優(yōu)點：解決了設(shè)備之間的差異化展示，讓不同的設(shè)備達到最優(yōu)的視覺體驗
缺點：兼容性代碼多，工作量大，加載速度受影響
? ? ? ? ? 對原有網(wǎng)站布局會產(chǎn)生影響，用戶判斷未必精準
響應式設(shè)計的原則
移動優(yōu)先：
? ? ?在設(shè)計的初期就要考慮的頁面如何在多終端展示
漸進增強：
? ? ?充分發(fā)揮硬件設(shè)備的最大功能
eg：在IE6，IE7，IE8瀏覽器不支持CSS3 的屬性，我們就要用js來hack
響應式實現(xiàn)方法
1.CSS3-Media Query? ? 最簡單的方式?
2.借助原生的JavaScript（對于不支持CSS3瀏覽器，成本高，不推薦使用）
3.第三方開元框架? 可以很好的支持瀏覽器響應式布局的設(shè)計
一.CSS3-Media Query
CSS3-Media Query是根據(jù)不同的李玉蘭設(shè)備給到用戶不同展示
1.常見的屬性：
device-width,deivce-height-----------屏幕寬高
width,height-------------------------------渲染窗口寬高
orientation--------------------------------設(shè)備方向
resolution---------------------------------設(shè)備分辨率（dpi）
2.基本語法
外聯(lián)CSS語法
內(nèi)嵌樣式的語法
外聯(lián)語法：
外聯(lián)的樣式表中，設(shè)置為背景色為紅色
media="only screen and (max-width:480px) 這句話表示，只有屏幕在480px 內(nèi)樣式表才顯示效果、
內(nèi)嵌樣式的語法：
<style>
? ? ? ?@media? screen and (min-width:480px) {
? ? ? body{
? ? ? ? ? ? background-color:blue;
? ? ? ?}
? ?}
</style>
只有在屏幕寬度大于480px,才會顯示背景為藍色
二.bootstraps框架響應式開發(fā)
框架幫我們解決了低瀏覽器不支持的CSS3缺點，一款移動端優(yōu)先的前端框架
對于IE8瀏覽器呢，需要引用Responds.js 來支持media query
1.bootstrap使用首先要設(shè)置一個meta標簽
<meta name="viewport" content="width=decice-width,initial-scale=1.0">? //initial-scale=1.0 默認的是不設(shè)置縮放
2.引入bootstrap css文件
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
3.為了兼容IE8以下的瀏覽器呢，我們需要兼容引入Responds.js，操作如下:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<!--[if lt IE 9]-->
<script? src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!--[endif]-->
4.只涉及響應式布局，不需要這兩個部分內(nèi)容，如果需要事件之類的需要引入bootstrap.js文件，而它的使用需要引入jQuery。
<script? src="juery.js"></script>
<script src="bootstrap.min.js"></script>
如此頁面框架便搭建便完成了。
CSS布局常用組件
柵格系統(tǒng)，即為列布局
? ? ? 行必須放在.container中
當屏幕在768px以下的時候（.col-xs-），使用的垂直布局，大于768px的話，可以垂直布局可以水平布局，自適應
Buttons,重要的組件，設(shè)置按鈕的樣式，按鈕可響應
網(wǎng)站整體的布局
components 組件
bootatrap本身提供了現(xiàn)成的組件和結(jié)構(gòu)，對組件進行改造，可以達到預期的效果。
