css響應式有哪些常用布局_css響應式有什么布局

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

　　css響應式布局

　　一、什么是響應式布局?

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

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

　　二、響應式布局有哪些優點和缺點?

　　優點：

　　面對不同分辨率設備靈活性強

　　能夠快捷解決多設備顯示適應問題

　　缺點：

　　兼容各種設備工作量大，效率低下

　　代碼累贅，會出現隱藏無用的元素，加載時間加長

　　其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果

　　一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

　　三、響應式布局該怎么設計?

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

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

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

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

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

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

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

　　畫面比例aspect-ratio點陣打印機等。

　　設備比例device-aspect-ratio-點陣打印機等。

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

　　設備的分辨率resolution。

　　3、語法結構及用法

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

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

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

　　示例二：在樣式表中內嵌@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}

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

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

　　4、測試Media Queries

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

　　5、通過Media Queries實現響應式布局設計

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

　　CSS頁面布局

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

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

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

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

　　使你的頁面載入得更快

　　降低你的流量費用

　　讓你在修改設計時更有效率而代價更低

　　幫助你的整個站點保持視覺的一致性

　　讓你的站點可以更好地被搜索引擎找到

　　使你的站點對瀏覽者和瀏覽器更具親和力

　　在世界上越來越多人采用 Web 標準時，它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。

　　3、表格帶來的問題

　　把格式數據混入你的內容中。

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

　　帶寬并非免費。

　　這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。

　　這還使我們保持整個站點的視覺的一致性極難，花費也極高。

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

　　4、過渡性的設計

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

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

　　5、結構化標記：所寫即所想，所想即所寫

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

　　CSS制作網頁誤區

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

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

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

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

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

　　3、并不是所有的內容都需要div做“容器”

　　主菜單究竟是用

　　還是

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

　　在只包含了一個

　　元素的時候，這個div就顯得有些冗余，但有時候為了配合美工絢麗的設計，多一層標簽就意味著多一層變化(有些人在a標簽里套span也是如此)。而div不帶任何原始屬性的先天優勢也是其它標簽所無法比擬的。這個命題我只是想說明一件事，就是我們應該意識到，

　　之外，還有

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

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

　　”，也有人寫做

　　或者標簽的時候，它們是否還有存在的必要?直接寫成會破壞結構嗎?會缺乏語義嗎?會影響布局嗎?換一種思路，你也許就會有不一樣的收獲。

　　4、工作上也做到“結構與表現分離”

　　關于這一點，網絡上很多高手都是這樣建議的，也就是先打開編輯器，把結構完整地寫出來，再去CSS里寫表現，而盡量不去動已經寫好的結構。

　　然而以看書為主要學習方式的人卻很難體會，因為關于標準的書籍多半是手把手來教的，也就是必然是結構表現結合，循序漸進。雖然有些書籍有這方面的建議，但短短的幾句話遠不如讀書過程中的潛移默化。在制作人員能夠對結構良好把握的時候，同時寫結構與表現也不會對結果有太大的影響。但以我的經驗，結構表現分離的工作方式，要比同時寫結構與表現效率高很多，同時也不容易遺漏頁面上的元素。

　　當然，所謂的“結構與表現分離”并不是完全不考慮表現，想要兼顧到表現，就要保證——在不破壞結構的前提下，CSS選擇器能夠選擇到盡量多的內容。在哪些地方加class，或者用哪些標簽來區分，是一個見仁見智的地方，相信每個人都有自己的體會。而結合不同的設計稿，有時候也需要做出相應的變化，然而這些變化都應該有一個同樣的前提——不破壞代碼的結構和可讀性。

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

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

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

　　沒有CSS，指的是當我們的網站因為各種未知的原因導致CSS文件載入失敗，不要因此而慌亂，這是考驗我們代碼質量的最佳時機。在沒有CSS的時候，如果網頁仍舊保持良好的可讀性，這成果要遠比通過W3C驗證更值得我們自豪。