在研究響應(yīng)式的時(shí)候，記錄了一些感想上炎，分享出來(lái)恃逻，拋磚引玉，希望可以和大家一起討論藕施⌒量椋總結(jié)下來(lái)，響應(yīng)式比之前想象的要復(fù)雜得多铅碍。

1. ie9以下（不包括ie9）采用ie條件注釋?zhuān)瑸閕e8以及一下單獨(dú)開(kāi)一個(gè)樣式文件

2. 一個(gè)模塊的mq樣式整體放在這個(gè)模塊的樣式的之后润绵，符合層疊邏輯，也同時(shí)以免被層疊胞谈。

3. 祈求在一個(gè)相應(yīng)點(diǎn)上同時(shí)做變化幾乎是不可能的尘盼，因?yàn)榘媸街虚g的變化，無(wú)論是視覺(jué)還是具體的編碼人員不可能掌握所有細(xì)節(jié)烦绳。

4. 流體布局很關(guān)鍵卿捎，%視父級(jí)為參照物，這一點(diǎn)雖然很多人都知道径密，但是實(shí)際做的時(shí)候卻最容易被忽略午阵。

5. 清除浮動(dòng)也很重要，切記享扔。

6. 如果你希望邊框底桂、邊距（內(nèi)、外）也在100%的范圍內(nèi)惧眠，直接設(shè)置width:auto就好了籽懦，不要給予希望在新的css3屬性上，也不要寄希望在-webkit上氛魁，-webkit-很容易就會(huì)變成下一個(gè)ie6了暮顺。

7. 合理的嵌套更加健壯厅篓，用一個(gè)包裝元素來(lái)替代設(shè)置當(dāng)前元素margin或者padding。舉例捶码，假如有A和B兩個(gè)元素羽氮，width是40%，maring-right是10%惫恼，這樣很容易在搜索瀏覽器的時(shí)候篡位档押，所以用一個(gè)包裝元素C去分別包裹A和B，然給給C設(shè)置50%尤筐，A和B分別設(shè)置為80%汇荐。這樣就是合理且健壯的嵌套了。

8. 兩行兩列這種設(shè)計(jì)盆繁，由于流體布局和字?jǐn)?shù)的不同掀淘，所以為每一行添加一個(gè)包裝元素，更加健壯油昂。也就是說(shuō)革娄，先做兩行，再在每一行里做兩列冕碟。

9. 不要奢望在在每一個(gè)像素的寬度上不會(huì)出現(xiàn)超出預(yù)期的表現(xiàn)拦惋，因?yàn)闆](méi)有任何人知道頁(yè)面在每一個(gè)像素寬度時(shí)候的表現(xiàn)的樣子，頁(yè)面越負(fù)責(zé)可預(yù)期的就越不準(zhǔn)確安寺。所以mq可能真的是“非預(yù)期數(shù)值”（預(yù)期數(shù)值指代在設(shè)計(jì)和實(shí)現(xiàn)之前約定的響應(yīng)點(diǎn)）

10. 相同區(qū)間的mq和mq會(huì)層疊厕妖，全局的樣式也會(huì)和mq中的樣式層疊，所以屬性盡量不要寫(xiě)成縮寫(xiě)挑庶。以減少忘記的風(fēng)險(xiǎn)言秸。

11. 圖片的自適應(yīng)處理不容易，特別是有邊框的迎捺，如果正常條件（沒(méi)有利用mq來(lái)約束）下設(shè)置了寬和高举畸，在另外一個(gè)mq下，僅僅設(shè)置一個(gè)屬性是不行的凳枝，還是那句話抄沮，mq不是二選一（除非是兩個(gè)不同的mq區(qū)間），而是層疊ａ濉叛买！

12. 如果水平列表的兩端的元素兩端對(duì)齊，以四個(gè)元素為例锭环，那么除了前三個(gè)預(yù)留左邊距聪全，最后一個(gè)為零；或者第一個(gè)右邊據(jù)為0辅辩；后三個(gè)有右邊距以外难礼。可以采用第一個(gè)左側(cè)有玫锋，最后一個(gè)右側(cè)有蛾茉，中間兩個(gè)左右偏移邊距來(lái)做，短的一面為 邊距除以空白數(shù)撩鹿，比如4個(gè)列表項(xiàng)，邊距為40,則40除以3节沦。好處么键思？就是可以保證每一個(gè)外包裝為通欄的25%。

13. 四個(gè)25%甫贯，兩個(gè)50% 沒(méi)關(guān)系，但是50% 25% 25%就可能會(huì)掉下去最后一個(gè)疾党，所以24.99，22.49有時(shí)還會(huì)相差1~2像素梨撞。

14. 如果版式變化不大，那么從大到小的寫(xiě)mq嗜侮，不必寫(xiě)一個(gè)區(qū)間咪惠，只寫(xiě)最大值即可，這樣一層一層的繼承朵纷，小尺寸繼承大尺寸，另外，不用過(guò)分擔(dān)心選擇器本身權(quán)重的問(wèn)題谎懦，mq會(huì)提高其優(yōu)先級(jí)。

15. 像導(dǎo)航和版權(quán)這種在pc寞奸、pad在跳、phone截然不同的版式瓷翻。mq彼哼，就寫(xiě)區(qū)間剪菱。這樣在區(qū)間外就等于這些dom毫無(wú)樣式，這樣就不比擔(dān)心由繼承引發(fā)的覆蓋构灸、優(yōu)先級(jí)稠氮、重寫(xiě)以及未知問(wèn)題括袒。減少了屬性的重寫(xiě)芥炭，提高了效率渺蒿、降低了修改成本。其實(shí)就是等于一個(gè)dom，為不同的設(shè)備寫(xiě)不同的樣式，這些樣式之間不繼承火脉。

16. 如果你希望幾個(gè)元素是相對(duì)位置不變的話，請(qǐng)將他們包裹重斑，通過(guò)這個(gè)包裹元素使他們整體與其他元素或元素組做排版假颇，所以一個(gè)健壯的響應(yīng)式離不開(kāi)這些看似“冗余”的包裹元素。但還是以最少的可實(shí)現(xiàn)目標(biāo)的dom層級(jí)為目標(biāo)。

17. 關(guān)于背景圖侠草，以中心為原點(diǎn)進(jìn)行“裁剪”是理智的，已某一側(cè)為原點(diǎn)看起來(lái)都有點(diǎn)怪。另外可以使用background-size某個(gè)值為auto端衰，另外一個(gè)使用%

18. 大圖片請(qǐng)寫(xiě)在一個(gè)mq區(qū)間內(nèi)腾节，不要只寫(xiě)最大值案腺，這樣會(huì)搞定按需加載的問(wèn)題。

19. banner樣式實(shí)踐

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

02.banner{height:684px;background:url(img/banner1980.jpg)centercenterno-repeat; background-size:auto100%;}

03}/*高度一直填充，兩側(cè)裁剪颅眶，這種體驗(yàn)先看比較好*/

04/*以下不同目標(biāo)分辨率載入不同的圖片只泼，保證k數(shù)最佳弥咪，裁剪體驗(yàn)應(yīng)該一致*/

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

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

07}

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

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

10}

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

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

13}

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

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

16}

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

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

19}

20. logo如果是在banner的背景圖上鏤空潜的，這樣是不推薦的硫戈。在縮小瀏覽器窗口寬度的時(shí)候铸题，給人以很明顯很明顯的視覺(jué)差，感覺(jué)頁(yè)面極其不健壯（至少我的感覺(jué)是這樣）墙牌，似乎有隨時(shí)要散的感覺(jué)。文字也有這感覺(jué)无牵，特別是有大量文字的時(shí)候。所以你會(huì)發(fā)現(xiàn)很多響應(yīng)式好的網(wǎng)站签舞，他的導(dǎo)航的底色都是純色搂鲫。logo和導(dǎo)航都不鏤空在一張背景圖上拣挪。當(dāng)然也有少數(shù)在的，比如adobe。

21. 接20笼平，一般banner圖片幾乎是滿屏的可能高達(dá)1980px园骆；而一般如果是居中的話，我們把導(dǎo)航和logo以及一些小功能寓调，比如登錄锌唾、搜索控制在1200px最大寬度，當(dāng)頁(yè)面大于這個(gè)最大寬度的時(shí)候捶牢，這個(gè)區(qū)域就像釘在了背景圖上鸠珠，不會(huì)導(dǎo)致有兩個(gè)圖層的感覺(jué)。所以當(dāng)頁(yè)面寬度馬上等于最大寬度的時(shí)候秋麸，我們?cè)诶胢q重新寫(xiě)定義下一這個(gè)區(qū)域的最大寬度渐排，當(dāng)然是該小一點(diǎn)，這樣就解決了20出現(xiàn)的那個(gè)問(wèn)題灸蟆。

22. png8的問(wèn)題驯耻，ie6下就用純色做底吧。我最理想的想法是炒考，當(dāng)用ie6訪問(wèn)所有公司web產(chǎn)品的時(shí)候可缚，給用戶一個(gè)頁(yè)面，先登錄QQ帳號(hào)斋枢，然后下載最新的QQ瀏覽器帘靡，然后發(fā)這個(gè)用戶10個(gè)Q幣。然后瀏覽器界就清靜了瓤帚。

23. 接21描姚，當(dāng)前mq中的這個(gè)區(qū)域的最大寬度等于下一個(gè)（更小的一個(gè)尺寸）mq的尺寸，這樣就用戶的釘在了背景圖的上面了戈次。

24. 對(duì)于相同的一些元素轩勘，某一個(gè)有特殊的樣式，優(yōu)先使用nth-of-type選擇器怯邪。在測(cè)試ie8以及一下的時(shí)候绊寻，再為這個(gè)特殊的dom添加一個(gè)class之類(lèi)，然后再在那個(gè)ie8以及一下的樣式表中書(shū)寫(xiě)復(fù)制響應(yīng)的規(guī)則悬秉。

25. body下有一個(gè)包裹元素澄步，作為整體彈性的參照，為ie6搂捧、ie7單獨(dú)寫(xiě)一個(gè)寬度驮俗，為什么是1000px，由于很難獲得使用ie6的用戶的分辨率允跑，或者說(shuō)獲取了之后可能因?yàn)閿?shù)據(jù)繁多不好決策王凑，所以簡(jiǎn)單粗暴搪柑，認(rèn)為使用ie6的都是低端設(shè)備用戶，是小顯示器用戶索烹，是1024*768分辨率工碾；至于ie7，設(shè)置了4個(gè)25%的浮動(dòng)百姓，在縮小瀏覽器的過(guò)程中都能時(shí)不時(shí)的掉下去一個(gè)渊额，對(duì)于小數(shù)點(diǎn)的像素就自動(dòng)向上補(bǔ)全，太悲哀了垒拢。所以如下：

1regular css file

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

3

4lt9css file

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

26. 對(duì)于一定要百分之百通欄的模塊，比如求类，帶有背景色的版權(quán)奔垦，或者banner，那么可以在lt9的文件夾里為ie7 6寫(xiě)一個(gè)不是只有1000px尸疆，而是可以100%的樣式椿猎，但是切記這里只要有一列，否則就又產(chǎn)生了25中提到的問(wèn)題寿弱，也許犯眠，你可以這么寫(xiě)：

1lt9css file

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

3.one-percent{width:100%;}/*新增的症革，一定要在layout的后面筐咧，否則對(duì)于ie6 7不生效*/

4

5html dom

6

7

8

所以我建議，把banner 主體部分 版權(quán) 三者用三個(gè)layout包裹噪矛，這樣便于對(duì)ie6 ie7 ie8做樣式嗜浮。

27. 經(jīng)過(guò)長(zhǎng)達(dá)半年的持續(xù)統(tǒng)計(jì)，1366px用戶最多摩疑，根據(jù)柵格化，n=24為基準(zhǔn)畏铆，得出W=(A*n)-i雷袋，所以如果要設(shè)置最大寬度則設(shè)置為1310px；a=45px,i=10px辞居；不過(guò)由于與門(mén)戶和電商等網(wǎng)站的排版不同且主要為了彈性版式楷怒，所以這里最大寬度是我們所需要的，至于45px和10px瓦灶，以后有固定版式的話可以使用鸠删。

28. 響應(yīng)點(diǎn)：1366px 1200px 1110px 768px 568px 414px 320px；768以下的很好理解也方便約束贼陶，PC側(cè)的響應(yīng)點(diǎn)是較難控制的刃泡，所以前面三個(gè)值基本都是按照版式來(lái)操作的巧娱。原因參見(jiàn)3。

29. 有的人說(shuō)寫(xiě)響應(yīng)式從小往大寫(xiě)烘贴，意思是說(shuō)先寫(xiě)手機(jī)端禁添，然后寫(xiě)PC端，大致的原因是從大往小寫(xiě)的話桨踪，手機(jī)就要層疊和重寫(xiě)很多樣式老翘，可能會(huì)影響性能。理論上锻离，我是贊成的铺峭，實(shí)際上我并沒(méi)有測(cè)試過(guò)到底性能有多么影響。但是單單從布局的角度上講汽纠，從設(shè)計(jì)的角度上講卫键，至少我的邏輯是從大往小寫(xiě)，因?yàn)樾〉幕径际窃诖蟮幕A(chǔ)上做刪減和布局的變化疏虫，所以寫(xiě)的時(shí)候邏輯比較順暢永罚。不過(guò)無(wú)論從大到小，還是從小到大卧秘，自己順手就好呢袱。一般視覺(jué)都會(huì)先設(shè)計(jì)PC的，然后考慮mobile是什么樣的翅敌，這一點(diǎn)也使得我是從大到小的去寫(xiě)羞福。

30. 之前黃老師問(wèn)我，認(rèn)為響應(yīng)式的難點(diǎn)是在設(shè)計(jì)上還是在技術(shù)上蚯涮，我當(dāng)時(shí)說(shuō)是技術(shù)上沒(méi)什么治专，關(guān)鍵是版式的變化和設(shè)計(jì)的體驗(yàn)。現(xiàn)在想想遭顶。版式變化固然是難點(diǎn)张峰，但是技術(shù)手段也很重要，在這方面的深度和方式的選擇要比版式上的選擇復(fù)雜的多棒旗。

31. 響應(yīng)式三大技術(shù)：流體喘批、mq、彈性圖片铣揉。

以上都是個(gè)人經(jīng)驗(yàn)饶深，難免片面，歡迎討論逛拱。