響應式web網站設計製作方法

標籤：

在研究響應式的時候，記錄了一些感想，分享出來，拋磚引玉，希望可以和大家一起討論。總結下來，響應式比之前想象的要複雜得多。

1. ie9以下（不包括ie9）採用ie條件注釋，為ie8以及一下單獨開一個樣式檔案

 

1	<!--[if lt IE 9]>

2	<link href="lt9.css" rel="stylesheet" type="text/css">

3	<![endif]-->

 

2. 一個模組的mq樣式整體放在這個模組的樣式的之後，符合層疊邏輯，也同時以免被層疊。

3. 祈求在一個相應點上同時做變化幾乎是不可能的，因為版式中間的變化，無論是視覺還是具體的編碼人員不可能掌握所有細節。

4. 流體布局很關鍵，%視父級為參照物，這一點雖然很多人都知道，但是實際做的時候卻最容易被忽略。

5. 清除浮動也很重要，切記。

6. 如果你希望邊框、邊距（內、外）也在100%的範圍內，直接設定width:auto就好了，不要給予希望在新的css3屬性上，也不要寄希望在-webkit上，-webkit-很容易就會變成下一個ie6了。

7. 合理的嵌套更加健壯，用一個封裝元素來替代設定當前元素margin或者padding。舉例，假如有A和B兩個元素，width是 40%，maring-right是10%，這樣很容易在搜尋瀏覽器的時候篡位，所以用一個封裝元素C去分別包裹A和B，然給給C設定50%，A和B分別 設定為80%。這樣就是合理且健壯的嵌套了。

8. 兩行兩列這種設計，由於流體布局和字數的不同，所以為每一行添加一個封裝元素，更加健壯。也就是說，先做兩行，再在每一行裡做兩列。

9. 不要奢望在在每一個像素的寬度上不會出現超出預期的表現，因為沒有任何人知道頁面在每一個像素寬度時候的表現的樣子，頁面越負責可預期的就越不準確。所以mq可能真的是“非預期數值”（預期數值指代在設計和實現之前約定的響應點）

10. 相同區間的mq和mq會層疊，全域的樣式也會和mq中的樣式層疊，所以屬性盡量不要寫成縮寫。以減少忘記的風險。

11. 圖片的自適應處理不容易，特別是有邊框的，如果正常條件（沒有利用mq來約束）下設定了寬和高，在另外一個mq下，僅僅設定一個屬性是不行的，還是那句話，mq不是二選一（除非是兩個不同的mq區間），而是層疊！！

12. 如果水平列表的兩端的元素左右對齊，以四個元素為例，那麼除了前三個預留左邊距，最後一個為零；或者第一個右邊據為0；後三個有右邊距以外。可以採用第一 個左側有，最後一個右側有，中間兩個左右位移邊距來做，短的一面為 邊距除以空白數，比如4個清單項目，邊距為40,則40除以3。好處嗎？就是可以保證每一個外封裝為通欄的25%。

13. 四個25%，兩個50% 沒關係，但是50% 25% 25%就可能會掉下去最後一個，所以24.99，22.49有時還會相差1~2像素。

14. 如果版式變化不大，那麼從大到小的寫mq，不必寫一個區間，唯寫最大值即可，這樣一層一層的繼承，小尺寸繼承大尺寸，另外，不用過分擔心選取器本身權重的問題，mq會提高其優先順序。

15. 像導航和著作權這種在pc、pad、phone截然不同的版式。mq，就寫區間。這樣在區間外就等於這些dom毫無樣式，這樣就不比擔心由繼承引發的覆蓋、 優先順序、重寫以及未知問題。減少了屬性的重寫，提高了效率、降低了修改成本。其實就是等於一個dom，為不同的裝置寫不同的樣式，這些樣式之間不繼承。

16. 如果你希望幾個元素是相對位置不變的話，請將他們包裹，通過這個包裹元素使他們整體與其他元素或元素組做排版，所以一個健壯的響應式離不開這些看似“冗餘”的包裹元素。但還是以最少的可實現目標的dom層級為目標。

17. 關於背景圖，以中心為原點進行“裁剪”是理智的，已某一側為原點看起來都有點怪。另外可以使用background-size某個值為auto，另外一個使用%

18. 大圖片請寫在一個mq區間內，不要唯寫最大值，這樣會搞定按需載入的問題。

19. banner樣式實踐

01	@media (min-width:1110px){

02	.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}

03	}/*高度一直填充，兩側裁剪，這種體驗先看比較好*/

04	/*以下不同目標解析度載入不同的圖片，保證k數最佳，裁剪體驗應該一致*/

05	@media (min-width:769px) and (max-width:1110px){

06	.banner{height:383px; background:url(img/banner1110.jpg) center center;}

07

}

08	@media (min-width:569px) and (max-width:768px){

09	.banner{height:265px; background:url(img/banner768.jpg) center center;}

10

}

11	@media (min-width:415px) and (max-width:568px){

12	.banner{height:196px; background:url(img/banner568.jpg) center center;}

13

}

14	@media (min-width:321px) and (max-width:414px){

15	.banner{height:143px; background:url(img/banner414.jpg) center center;}

16

}

17	@media (max-width:320px){

18	.banner{height:111px; background:url(img/banner320.jpg) center center;}

19

}

20. logo如果是在banner的背景圖上鏤空，這樣是不推薦的。在縮小瀏覽器視窗寬度的時候，給人以很明顯很明顯的視覺差，感覺頁面極其不健壯（至少我的 感覺是這樣），似乎有隨時要散的感覺。文字也有這感覺，特別是有大量文字的時候。所以你會發現很多響應式好的網站，他的導航的底色都是純色。logo和導 航都不鏤空在一張背景圖上。當然也有少數在的，比如adobe。

21. 接20，一般banner圖片幾乎是滿屏的可能高達1980px；而一般如果是置中的話，我們把導航和logo以及一些小功能，比如登入、搜尋控制在 1200px最大寬度，當頁面大於這個最大寬度的時候，這個地區就像釘在了背景圖上，不會導致有兩個圖層的感覺。所以當頁面寬度馬上等於最大寬度的時候， 我們在利用mq重新寫定義下一這個地區的最大寬度，當然是該小一點，這樣就解決了20出現的那個問題。

22. png8的問題，ie6下就用純色做底吧。我最理想的想法是，當用ie6訪問所有公司web產品的時候，給使用者一個頁面，先登入QQ帳號，然後下載最新的QQ瀏覽器，然後發這個使用者10個Q幣。然後瀏覽器界就清靜了。

23. 接21，當前mq中的這個地區的最大寬度等於下一個（更小的一個尺寸）mq的尺寸，這樣就使用者的釘在了背景圖的上面了。

24. 對於相同的一些元素，某一個有特殊的樣式，優先使用nth-of-type選取器。在測試ie8以及一下的時候，再為這個特殊的dom添加一個class之類，然後再在那個ie8以及一下的樣式表中書寫複製響應的規則。

25. body下有一個包裹元素，作為整體彈性的參照，為ie6、ie7單獨寫一個寬度，為什麼是1000px，由於很難獲得使用ie6的使用者的解析度，或者說 擷取了之後可能因為資料繁多不好決策，所以簡單粗暴，認為使用ie6的都是低端裝置使用者，是小顯示器使用者，是1024*768解析度；至於ie7，設定了 4個25%的浮動，在縮小瀏覽器的過程中都能時不時的掉下去一個，對於小數點的像素就自動向上補全，太悲哀了。所以如下：

1	regular css file

2	.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;}

3

4	lt9 css file

5	.layout{*width:1000px; min-width:1000px;}/*ie8的最小寬度為1000px，ie7 6隻有1000px*/

26. 對於一定要百分之百通欄的模組，比如，帶有背景色的著作權，或者banner，那麼可以在lt9的檔案夾裡為ie7 6寫一個不是只有1000px，而是可以100%的樣式，但是切記這裡只要有一列，否則就又產生了25中提到的問題，也許，你可以這麼寫：

1	lt9 css file

2	.layout{*width:1000px; min-width:1000px;}/*ie8的最小寬度為1000px，ie7 6隻有1000px*/

3	.one-percent{width:100%;}/*新增的，一定要在layout的後面，否則對於ie6 7不生效*/

4

5

html dom

6	<div class="layout one-percent">

7	<!--code-->

8

</div>

所以我建議，把banner 主體部分 著作權 三者用三個layout包裹，這樣便於對ie6 ie7 ie8做樣式。

27. 經過長達半年的持續統計，1366px使用者最多，根據柵格化，n=24為基準，得出W=(A*n)-i，所以如果要設定最大寬度則設定為 1310px；a=45px,i=10px；不過由於與門戶和電商等網站的排版不同且主要為了彈性版式，所以這裡最大寬度是我們所需要的，至於45px和 10px，以後有固定版式的話可以使用。

28. 響應點：1366px 1200px 1110px 768px 568px 414px 320px；768以下的很好理解也方便約束，PC側的響應點是較難控制的，所以前面三個值基本都是按照版式來操作的。原因參見3。

29. 有的人說寫響應式從小往大寫，意思是說先寫手機端，然後寫PC端，大致的原因是從大往小寫話，手機就要層疊和重寫很多樣式，可能會影響效能。理論上，我 是贊成的，實際上我並沒有測試過到底效能有多麼影響。但是單單從布局的角度上講，從設計的角度上講，至少我的邏輯是從大往小寫，因為小的基本都是在大的基 礎上做刪減和布局的變化，所以寫的時候邏輯比較順暢。不過無論從大到小，還是從小到大，自己順手就好。一般視覺都會先設計PC的，然後考慮mobile是 什麼樣的，這一點也使得我是從大到小的去寫。

30. 之前黃老師問我，認為響應式的痛點是在設計上還是在技術上，我當時說是技術上沒什麼，關鍵是版式的變化和設計的體驗。現在想想。版式變化固然是痛點，但是技術手段也很重要，在這方面的深度和方式的選擇要比版式上的選擇複雜的多。

31. 響應式三大技術：流體、mq、彈性圖片。

 

轉自（http://www.wufangbo.com/xiang-ying-shi-shi-xian/）

響應式web網站設計製作方法