響應式佈局這件小事有哪些優勢和缺點該怎麼設計

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

　　響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

1、響應式佈局有哪些優勢和缺點

 

1. 1

   優勢：

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

   　　可以快捷解決多設備顯示適應問題

2. 2

   缺點：

   　　兼容各類設備工做量大，效率低下

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

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

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

   END

2、響應式佈局該怎麼設計?

 

1.  

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

2.  

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

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

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

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

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

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

   　　設備的分辨率resolution。

3. 3

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

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

   <link rel=「stylesheet」 type=「text/css」 media=「only screen and （max-width： 480px），only screen and （max-device-width： 480px）」 href=「link.css」/>

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