通常頁面的下載是按照代碼的排列順序，而表格布局代碼的排列代表從上向下，從左到右，無法改變。大家知道css布局嗎?下面由學(xué)習(xí)啦小編為大家整理的css響應(yīng)式布局，希望大家喜歡!

　　css響應(yīng)式布局

　　一、什么是響應(yīng)式布局?

　　響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

　　響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用大勢所趨來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

　　二、響應(yīng)式布局有哪些優(yōu)點(diǎn)和缺點(diǎn)?

　　優(yōu)點(diǎn)：

　　面對不同分辨率設(shè)備靈活性強(qiáng)

　　能夠快捷解決多設(shè)備顯示適應(yīng)問題

　　缺點(diǎn)：

　　兼容各種設(shè)備工作量大，效率低下

　　代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長

　　其實(shí)這是一種折衷性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果

　　一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況

　　三、響應(yīng)式布局該怎么設(shè)計(jì)?

　　我們在上面了解了什么是響應(yīng)式布局，那在我們的實(shí)際項(xiàng)目中應(yīng)該怎么去設(shè)計(jì)呢?在以往我們設(shè)計(jì)網(wǎng)站的時(shí)候都會(huì)受到不同瀏覽器的兼容性的困擾，現(xiàn)在還要來個(gè)不同尺寸設(shè)備，我們該怎么淡定下來呢?有需求就會(huì)有解決方案，呵呵，說到響應(yīng)式布局，就不得不提起CSS3中的Media Query(媒介查詢)，這可是個(gè)好東西，易用、強(qiáng)大、快捷……Media Query是制作響應(yīng)式布局的一個(gè)利器，使用這個(gè)工具，我們可以非常方便快捷的制造出各種豐富的實(shí)用性強(qiáng)的界面。接下來就一起來深入的了解Media Query。

　　1、CSS中的Media Query(媒介查詢)是什么?

　　通過不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用于表達(dá)”大于或等于”和”小與或等于”。如：width會(huì)有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過這個(gè)標(biāo)簽屬性，我們可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動(dòng)設(shè)備，將會(huì)運(yùn)用更加的廣泛。

　　2、media query能夠獲取哪些值?

　　設(shè)備的寬和高device-width，device-heigth顯示屏幕/觸覺設(shè)備。

　　渲染窗口的寬和高width，heigth顯示屏幕/觸覺設(shè)備。

　　設(shè)備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機(jī)等。

　　畫面比例aspect-ratio點(diǎn)陣打印機(jī)等。

　　設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。

　　對象顏色或顏色列表color，color-index顯示屏幕。

　　設(shè)備的分辨率resolution。

　　3、語法結(jié)構(gòu)及用法

　　@media 設(shè)備名 only (選取條件) not (選取條件) and(設(shè)備選取條件)，設(shè)備二{sRules}

　　示例一：在link中使用@media：

　　上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。

　　示例二：在樣式表中內(nèi)嵌@media：

　　@media (min-device-width:1024px) and (max-width:989px)，screen and (max-device-width:480px)，(max-device-width:480px) and (orientation:landscape)，(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

　　在示例二中，設(shè)置了電腦顯示器分辨率(寬度)大于或等于1024px(并且最大可見寬度為989px);屏寬在480px及其以下手持設(shè)備;屏寬在480px以及橫向(即480尺寸平行于地面)放置的手持設(shè)備;屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。

　　從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號(hào)內(nèi)，srules為兼容設(shè)置的樣式表，包含在中括號(hào)里面。only(限定某種設(shè)備，可省略)，and(邏輯與)，not(排除某種設(shè)備)為邏輯關(guān)鍵字，多種設(shè)備用逗號(hào)分隔，這一點(diǎn)繼承了css基本語法。

　　4、測試Media Queries

　　最后，我們需要對我們剛剛設(shè)計(jì)的Media Queries進(jìn)行測試，想要在不同設(shè)備上測試Media Queries的效果，可以使用一個(gè)瀏覽工具來檢驗(yàn)不同尺寸屏幕下的顯示效果，在這里為大家介紹一個(gè)不錯(cuò)的在線工具 – Responsivator，它可以模擬iPhone等各種不同設(shè)備，并且還可以自定義不同尺寸屏幕的顯示效果，只需要輸入一個(gè)url甚至是本地的一個(gè)url(如：http://127.0.0.1/)，就可以看到網(wǎng)站在不同尺寸屏幕下的顯示效果。

　　5、通過Media Queries實(shí)現(xiàn)響應(yīng)式布局設(shè)計(jì)

　　好了，我們明白了什么是Media Query，那我們一起來運(yùn)用到響應(yīng)式布局的設(shè)計(jì)項(xiàng)目中去。設(shè)計(jì)思路很簡單，首先先定義在標(biāo)準(zhǔn)瀏覽器下的固定寬度(假如標(biāo)準(zhǔn)瀏覽器的分辨率為1024px，那么我們設(shè)置寬為980px)，然后用Media Query來監(jiān)測瀏覽器的尺寸變化，當(dāng)瀏覽器的分辨率小于1024px的時(shí)候，則通過Media Query預(yù)設(shè)的樣式表來將頁面的寬度設(shè)置為百分比顯示，這樣子頁面的結(jié)構(gòu)元素就會(huì)根據(jù)瀏覽器的的尺寸來進(jìn)行相對應(yīng)的調(diào)整。

　　CSS頁面布局

　　1、簡介：為何使用表格排版是不明智的?

　　表格之所以存在于 HTML 中，只是為了一個(gè)目的：顯示表格狀的數(shù)據(jù)。然而此后的 border="0" 使得設(shè)計(jì)師可以將圖片和文本放在這無形的網(wǎng)格中。迄今為止，表格仍然主導(dǎo)著視覺豐富的網(wǎng)站的設(shè)計(jì)方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強(qiáng)大的網(wǎng)站設(shè)計(jì)方法。

　　2、概覽：這對我有什么用處?

　　我們將告訴你這樣一種工作方式，它會(huì)：

　　使你的頁面載入得更快

　　降低你的流量費(fèi)用

　　讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低

　　幫助你的整個(gè)站點(diǎn)保持視覺的一致性

　　讓你的站點(diǎn)可以更好地被搜索引擎找到

　　使你的站點(diǎn)對瀏覽者和瀏覽器更具親和力

　　在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時(shí)，它還能 提高你的職場競爭實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。

　　3、表格帶來的問題

　　把格式數(shù)據(jù)混入你的內(nèi)容中。

　　這使得文件的大小無謂地變大，而用戶訪問每個(gè) 頁面時(shí)都必須下載一次這樣的格式信息。

　　帶寬并非免費(fèi)。

　　這使得重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力 (且昂貴)。

　　這還使我們保持整個(gè)站點(diǎn)的視覺的一致性極難，花費(fèi)也極高。

　　基于表格的頁面還大大降低了它對殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。

　　4、過渡性的設(shè)計(jì)

　　使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。

　　使用 link 和 @import 來載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。

　　5、結(jié)構(gòu)化標(biāo)記：所寫即所想，所想即所寫

　　即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。

　　CSS制作網(wǎng)頁誤區(qū)

　　1、“節(jié)省代碼”是營銷手段，不是宗旨

　　“使用div布局可以比table布局節(jié)省更多的代碼”，我在很多書籍和網(wǎng)站上見到過這句話。這句話本身是沒錯(cuò)的，可以“節(jié)省代碼”的確是網(wǎng)頁標(biāo)準(zhǔn)化所帶來的好處之一。然而切記，它只是“好處之一”，而不是“唯一好處”，更不是宗旨。“節(jié)省代碼”更多的時(shí)候是我們用來說服那些頑固不化的老板的營銷手段。網(wǎng)頁標(biāo)準(zhǔn)化的唯一宗旨是“結(jié)構(gòu)與表現(xiàn)分離”，而絕不是為了節(jié)省代碼而節(jié)省代碼。我曾經(jīng)因?yàn)榫W(wǎng)站邊欄甚至主體內(nèi)容的表現(xiàn)形式相同而采用了統(tǒng)一的 class (至今還有一些書是這樣教的)，這樣的確比分別命名id更節(jié)省代碼，然而這樣做的代價(jià)是代碼失去了良好的結(jié)構(gòu)。失去良好結(jié)構(gòu)的后果是：一、源代碼沒有了可讀性;二、網(wǎng)站增加了未知的維護(hù)成本。試想，當(dāng)某一塊內(nèi)容因?yàn)樾枰鞒霰憩F(xiàn)形式的變動(dòng)，例如鏈接的顏色等等，我們就不得不去修改頁面源文件，增加額外的 class，工作量比起只需要調(diào)整id分組就大了許多。而且長此以往，結(jié)構(gòu)將會(huì)越來越差，形成難以逆轉(zhuǎn)的惡性循環(huán)。

　　2、ID是狙擊槍，class是雙刃劍

　　想要做好網(wǎng)頁結(jié)構(gòu)，id與class都是必須熟練掌握的，所謂“兩手抓，兩手都要硬”。ID就象狙擊槍一樣，可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素;而class則是俠客的佩劍，信手拈來更加輕盈靈便，兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁面。然而現(xiàn)在有一種錯(cuò)誤的觀點(diǎn)，就是id完全可以用class來取代，事實(shí)上許多網(wǎng)頁源代碼也的確如此，打開來通篇class，找不到一個(gè)id。造成這種現(xiàn)象的理由有很多種，然而自table時(shí)代傳下來的根深蒂固的“class=CSS”的觀念才是本因。的確，class比id用途更廣更靈活，但也必須意識(shí)到，class對于構(gòu)建良好的網(wǎng)頁結(jié)構(gòu)遠(yuǎn)不如id有效。id的強(qiáng)制唯一性使得我們可以很容易通過id檢索到我們需要的任意模塊，而class則沒有這個(gè)優(yōu)勢。雖然我們可以為模塊定義唯一的 class名，但前提是——只有制作者本人可以動(dòng)網(wǎng)頁樣式。否則換一個(gè)稍微懶一些伙計(jì)，看到樣式相同便直接把前面的class拿來套用，其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁里有十幾個(gè)模塊都叫做“gonggao”或者“xinwen”，以至于為了區(qū)分還不得不加上大量的html注釋，這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的，通過通用class所節(jié)省下來的代碼，又不得不在每個(gè)單獨(dú)定義的class中揮霍掉。

　　ID是狙擊槍，class是雙刃劍，合則兩利，分則兩敗。

　　3、并不是所有的內(nèi)容都需要div做“容器”

　　主菜單究竟是用

　　還是

　　?這是一個(gè)博弈的問題。至今這個(gè)問題也沒有人能夠給出明確的答案，就連我也是如此。誠然，

　　在只包含了一個(gè)

　　元素的時(shí)候，這個(gè)div就顯得有些冗余，但有時(shí)候?yàn)榱伺浜厦拦そk麗的設(shè)計(jì)，多一層標(biāo)簽就意味著多一層變化(有些人在a標(biāo)簽里套span也是如此)。而div不帶任何原始屬性的先天優(yōu)勢也是其它標(biāo)簽所無法比擬的。這個(gè)命題我只是想說明一件事，就是我們應(yīng)該意識(shí)到，

　　之外，還有

　　這種寫法，同樣具有良好的結(jié)構(gòu)和語義，并且省去了一層嵌套。在我們不需要為華麗的美工勞心勞神的時(shí)候，是不是也可以讓結(jié)構(gòu)更加簡約呢?

　　這個(gè)命題其實(shí)還可以引申為——“并不是所有內(nèi)容都需要塊元素做容器”、“并不是所有鏈接都需要其它元素做容器”，例如很多頁面都有的“更多”。有些人寫做“

　　”，也有人寫做

　　或者標(biāo)簽的時(shí)候，它們是否還有存在的必要?直接寫成會(huì)破壞結(jié)構(gòu)嗎?會(huì)缺乏語義嗎?會(huì)影響布局嗎?換一種思路，你也許就會(huì)有不一樣的收獲。

　　4、工作上也做到“結(jié)構(gòu)與表現(xiàn)分離”

　　關(guān)于這一點(diǎn)，網(wǎng)絡(luò)上很多高手都是這樣建議的，也就是先打開編輯器，把結(jié)構(gòu)完整地寫出來，再去CSS里寫表現(xiàn)，而盡量不去動(dòng)已經(jīng)寫好的結(jié)構(gòu)。

　　然而以看書為主要學(xué)習(xí)方式的人卻很難體會(huì)，因?yàn)殛P(guān)于標(biāo)準(zhǔn)的書籍多半是手把手來教的，也就是必然是結(jié)構(gòu)表現(xiàn)結(jié)合，循序漸進(jìn)。雖然有些書籍有這方面的建議，但短短的幾句話遠(yuǎn)不如讀書過程中的潛移默化。在制作人員能夠?qū)Y(jié)構(gòu)良好把握的時(shí)候，同時(shí)寫結(jié)構(gòu)與表現(xiàn)也不會(huì)對結(jié)果有太大的影響。但以我的經(jīng)驗(yàn)，結(jié)構(gòu)表現(xiàn)分離的工作方式，要比同時(shí)寫結(jié)構(gòu)與表現(xiàn)效率高很多，同時(shí)也不容易遺漏頁面上的元素。

　　當(dāng)然，所謂的“結(jié)構(gòu)與表現(xiàn)分離”并不是完全不考慮表現(xiàn)，想要兼顧到表現(xiàn)，就要保證——在不破壞結(jié)構(gòu)的前提下，CSS選擇器能夠選擇到盡量多的內(nèi)容。在哪些地方加class，或者用哪些標(biāo)簽來區(qū)分，是一個(gè)見仁見智的地方，相信每個(gè)人都有自己的體會(huì)。而結(jié)合不同的設(shè)計(jì)稿，有時(shí)候也需要做出相應(yīng)的變化，然而這些變化都應(yīng)該有一個(gè)同樣的前提——不破壞代碼的結(jié)構(gòu)和可讀性。

　　再就是，一定要意識(shí)到，任何可視化的工具都是魔鬼。它們可視化界面下所呈現(xiàn)的效果，往往與真實(shí)瀏覽器相差千里，而我們真正要兼容的是瀏覽器，不是編輯器的可視化界面。

　　5、CSS不是萬能的，沒有CSS也不是萬萬不能的

　　相比于CSS1.0時(shí)代，今天CSS可以完成更多的事情，然而需求永遠(yuǎn)是領(lǐng)先于技術(shù)的，CSS無法完成網(wǎng)頁所有的表現(xiàn)層工作，有時(shí)候我們必須結(jié)合JS或者其他語言來實(shí)現(xiàn)一些效果。而另一些時(shí)候，用JS的方法比只靠CSS簡單得多，并且代碼結(jié)構(gòu)更加良好——最典型的例子就是下拉菜單。這些時(shí)候，我們要說服自己，或者說服老板與客戶，去采用更簡單更合理的方式。因?yàn)镈OM同樣是網(wǎng)頁標(biāo)準(zhǔn)的重要組成，并不是使用了JS我們的網(wǎng)頁就降低了效率或是不再標(biāo)準(zhǔn)，恰恰相反，這是對JS最大的誤解。說到這里不得不提一點(diǎn)，就是今天的時(shí)代，比以往更要求每個(gè)職業(yè)了解更多的相關(guān)知識(shí)，做設(shè)計(jì)的人要懂一點(diǎn)交互和制作，做制作的也必須了解設(shè)計(jì)和程序，尤其是JS這樣的前端技術(shù)，只有這樣，你和同事才能夠更好地合作，個(gè)人的發(fā)展前景也會(huì)更加光明。

　　沒有CSS，指的是當(dāng)我們的網(wǎng)站因?yàn)楦鞣N未知的原因?qū)е翪SS文件載入失敗，不要因此而慌亂，這是考驗(yàn)我們代碼質(zhì)量的最佳時(shí)機(jī)。在沒有CSS的時(shí)候，如果網(wǎng)頁仍舊保持良好的可讀性，這成果要遠(yuǎn)比通過W3C驗(yàn)證更值得我們自豪。