Responsive設(shè)計（一）
什么是響應式設(shè)計呢傻丝？維基百科是這樣對響應式作的描述：“Responsive設(shè)計簡單的稱為RWD筋现，是精心提供各種設(shè)備都能瀏覽網(wǎng)頁的一種設(shè)計方法减宣，RWD能讓你的網(wǎng)頁在不同的設(shè)備中展現(xiàn)不同的設(shè)計風格杖们≡兹颍”從這一點描述來說，RWD不是流體布局郊霎，也不是網(wǎng)格布局沼头，而是一種獨特的網(wǎng)頁設(shè)計方法。
響應式設(shè)計要考慮元素布局的秩序书劝，而且還需要做到“有求必應”进倍，那就需要滿足以下三個條件：網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；引用到網(wǎng)站的圖片必須是可伸縮的购对；不同的顯示風格猾昆，需要在Media Queries上寫不同的樣式。
要想靈活的使用Responsive骡苞，僅滿足這幾個條件還是不夠的垂蜗，我們必須對Responsive有一個全面的了解，那么要了解Responsive解幽，就得先了解他的一些術(shù)語：
1.流體網(wǎng)格
流體網(wǎng)格是一個簡單的網(wǎng)格系統(tǒng)贴见，這種網(wǎng)格設(shè)計參考了流體設(shè)計中的網(wǎng)格系統(tǒng)，將每個網(wǎng)格格子使用百分比單位來控制網(wǎng)格大小躲株。這種網(wǎng)格系統(tǒng)最大的好處是讓你的網(wǎng)格大小隨時根據(jù)屏幕尺寸大小做出相對應的比例縮放片部。
2.彈性圖片
彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放徘溢，用于適應各種網(wǎng)格的尺寸吞琐。而實現(xiàn)方法是比較簡單，一句代碼就能搞定的事情然爆。
img {max-width:100%;}
不幸的是站粟，這句代碼在IE8瀏覽器存在一個嚴重的問題，讓你的圖片會失蹤曾雕。當然彈性圖片在響應式設(shè)計中如何更好的實現(xiàn)奴烙，到目前為止都還存在爭議，也還在不斷的改善之中剖张。
為每一個斷點提供不同的圖片切诀，這是一個比較頭痛的事情，因為Media Queries并不能改變圖片“src”的屬性值搔弄，那有沒有辦分法可以解決呢幅虑？可以參考一下下面的解決方法。使用background-image給元素使用背景圖片顾犹，顯示/隱藏父元素倒庵，給父元素使用不同的圖片褒墨，然后通過Media Queries來控制這些圖片顯示或隱藏。
來看一個斷點解決圖片自適應的例子擎宝。
<img src="image.jpg"data-src-600px="image-600px.jpg"data-src-800px="image-800px.jpg"alt=""/>
對應的css代碼：
請注意：這僅僅是解決響應式圖片自適應的一種思路郁妈，但這種方案僅僅適配的斷點較少。并不太實用绍申，此處僅為擴展同學們的思路噩咪。
3.媒體查詢
媒體查詢在CSS3中得到了強大的擴展镣屹。使用這個屬性可以讓你的設(shè)計根據(jù)用戶終端設(shè)備適配對應的樣式署尤。這也是響應式設(shè)計中最為關(guān)鍵的「舻眨可以說Responsive設(shè)計離開了Medial Queries就失去了他生存的意義涂屁。簡單的說媒體查詢可以根據(jù)設(shè)備的尺寸书在，查詢出適配的樣式。Responsive設(shè)計最關(guān)注的就是：根據(jù)用戶的使用設(shè)備的當前寬度拆又，你的Web頁面將加載一個備用的樣式，實現(xiàn)特定的頁面風格栏账。
4.屏幕分辨率
屏幕分辨簡單點說就是用戶顯示器的分辨率帖族，深一點說，屏幕分辨率指的是用戶使用的設(shè)備瀏覽您的Web頁面時的顯示屏幕的分辨率挡爵，比如說智能手機瀏覽器竖般、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率茶鹃。Responsive設(shè)計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式涣雕。因此屏幕分辨率在Responsive設(shè)計中是一個很重要的東西，因為只有知道Web頁面要在哪種分辨率下顯示何種效果闭翩，才能調(diào)用對應的樣式挣郭。
5.主要斷點
主要斷點，在Web開發(fā)中是一個新詞疗韵，但對于Responsive設(shè)計中是一個很重要的一部分兑障。簡單的描述就是，設(shè)備寬度的臨界點蕉汪。在Media Queries中流译，其中媒體特性“min-width”和“max-width”對應的屬性值就是響應式設(shè)計中的斷點值。簡單點說者疤，就是使用主要斷點和次要斷點福澡，創(chuàng)建媒體查詢的條件。而每個斷點會對應調(diào)用一個樣式文件（或者樣式代碼）驹马，如下圖所示
上圖的style.css樣式文件運用在Web頁面中革砸，但這個樣式文件包括了所有風格的樣式代碼眯搭，也就是說所有設(shè)備下顯示的風格都通過這個樣式文件下載下來。當然业岁，在實際中還可以使用另一種方法鳞仙，也就是在不同的斷點加載不同的樣式文件，如下圖所示笔时。
上圖主要顯示的是主要斷點棍好，主要斷點加載的不同樣式文件直接將影響Web的效果。除了主要斷點之外允耿，為了滿足更多效果時借笙，還可以在這個基礎(chǔ)上添次要斷點。不過主要斷點和次要斷點增加之后较锡，需要維護的樣式也相應的增加业稼，成本也相對應的增加。因此在實際使用中蚂蕴，需要根據(jù)自身產(chǎn)品需求低散，決定斷點。
綜合下來骡楼，設(shè)置斷點應把握三個要點：滿足主要的斷點熔号；有可能的話添加一些別的斷點；設(shè)置高于1024的桌面斷點鸟整。
Responsive布局技巧
通過上面的介紹引镊，大家對響應式設(shè)計有了一定的了解，但在實際制作中還是有一些布局技巧的：
在Responsive布局中篮条，可以毫無保留的丟棄：
第一弟头， 盡量少用無關(guān)緊要的div；
第二涉茧，不要使用內(nèi)聯(lián)元素（inline）赴恨；
第三，盡量少用JS或flash降瞳；
第四嘱支，丟棄沒用的絕對定位和浮動樣式；
第五挣饥，摒棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置除师。
有舍才有得，丟棄了一些對Responsive有影響的東東扔枫，那么有哪些東東能幫助Responsive確定更好的布局呢汛聚？
第一，使用HTML5 Doctype和相關(guān)指南短荐；
第二倚舀，重置好你的樣式（reset.css）叹哭；
第三，一個簡單的有語義的核心布局痕貌；
第四风罩，給重要的網(wǎng)頁元素使用簡單的技巧，比如導航菜單之類元素舵稠。
使用這些技巧超升，無非是為了保持你的HTML簡單干凈，而且在你的頁面布局中的關(guān)鍵部分（元素）不要過分的依賴現(xiàn)代技巧來實現(xiàn)哺徊，比如說CSS3特效或者JS腳本室琢。
說了這么多，怎么樣的布局或者說HTML結(jié)構(gòu)才是簡單干凈的呢落追？這里教大家一個快速測試的方法盈滴。你首先禁掉你頁面中所有的樣式（以及與樣式相關(guān)的信息），在瀏覽器中打開轿钠，如果你的內(nèi)容排列有序巢钓，方便閱讀，那么你的這個結(jié)構(gòu)不會差到哪里去谣膳。
Responsive設(shè)計——meta標簽
最后還有一個不可或缺的東東竿报，那就是meta標簽，可以說继谚，在響應式設(shè)計中如果沒有這個meta標簽，你就是蹩腳的阵幸，響應式設(shè)計就是空談花履。
個meta標簽被稱為可視區(qū)域meta標簽，其使用方法如下挚赊。
在content屬性中主要包括以下屬性值诡壁，用來處理可視區(qū)域。
在實際項目中荠割，為了讓Responsive設(shè)計在智能設(shè)備中能顯示正常妹卿，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上蔑鹦，可以通過這個可視區(qū)域的meta標簽進行重置夺克，告訴他使用設(shè)備的寬度為視圖的寬度，也就是說禁止其默認的自適應頁面的效果嚎朽，具體設(shè)置如下：
另外一點铺纽，由于Responsive設(shè)計是結(jié)合CSS3的Media Queries屬性，才能盡顯Responsive設(shè)計風格哟忍，但大家都清楚狡门，在IE6-8中完全是不支持CSS3 Media陷寝。下面我們一起來看看CSS3 Meida Queries在標準設(shè)備上的運用，大家可以把這些樣式加到你的樣式文件中其馏，或者單獨創(chuàng)建一個名為“responsive.css”文件凤跑，并在相應的條件中寫上你的樣式，讓他適合你的設(shè)計需求叛复。
腳本下載地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)
respond.js(https://github.com/scottjehl/Respond)
http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js>
?Responsive設(shè)計——不同設(shè)備的分辨率設(shè)置
下面我們一起來看看CSS3 Meida Queries在標準設(shè)備上的運用仔引，大家可以把這些樣式加到你的樣式文件中，或者單獨創(chuàng)建一個名為“responsive.css”文件致扯，并在相應的條件中寫上你的樣式肤寝，讓他適合你的設(shè)計需求：
現(xiàn)在有關(guān)于這方面的運用也是相當?shù)某墒欤瑃witter的Bootstrap第二版本中就加上了這方面的運用抖僵。大家可以對比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }?
