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