在研究響應式的時候,記錄了一些感想,分享出來,拋磚引玉,但願能夠和你們一塊兒討論。總結下來,響應式比以前想象的要複雜得多。css
1. ie9如下(不包括ie9)採用ie條件註釋,爲ie8以及一下單獨開一個樣式文件html
<!--[if lt IE 9]> <link href="lt9.css" rel="stylesheet" type="text/css"> <![endif]-->
2. 一個模塊的mq樣式總體放在這個模塊的樣式的以後,符合層疊邏輯,也同時以避免被層疊。css3
3. 祈求在一個相應點上同時作變化幾乎是不可能的,由於版式中間的變化,不管是視覺仍是具體的編碼人員不可能掌握全部細節。web
4. 流體佈局很關鍵,%視父級爲參照物,這一點雖然不少人都知道,可是實際作的時候卻最容易被忽略。瀏覽器
5. 清除浮動也很重要,切記。dom
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樣式實踐
@media (min-width:1110px){ .banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;} }/*高度一直填充,兩側裁剪,這種體驗先看比較好*/ /*如下不一樣目標分辨率載入不一樣的圖片,保證k數最佳,裁剪體驗應該一致*/ @media (min-width:769px) and (max-width:1110px){ .banner{height:383px; background:url(img/banner1110.jpg) center center;} } @media (min-width:569px) and (max-width:768px){ .banner{height:265px; background:url(img/banner768.jpg) center center;} } @media (min-width:415px) and (max-width:568px){ .banner{height:196px; background:url(img/banner568.jpg) center center;} } @media (min-width:321px) and (max-width:414px){ .banner{height:143px; background:url(img/banner414.jpg) center center;} } @media (max-width:320px){ .banner{height:111px; background:url(img/banner320.jpg) center center;} }
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下有一個包裹元素,做爲總體彈性的參照,爲ie六、ie7單獨寫一個寬度,爲何是1000px,因爲很難得到使用ie6的用戶的分辨率,或者說獲取了以後可能由於數據繁多很差決策,因此簡單粗暴,認爲使用ie6的都是低端設備用戶,是小顯示器用戶,是1024*768分辨率;至於ie7,設置了4個25%的浮動,在縮小瀏覽器的過程當中都能時不時的掉下去一個,對於小數點的像素就自動向上補全,太悲哀了。因此以下:
regular css file .layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;} lt9 css file .layout{*width:1000px; min-width:1000px;}/*ie8的最小寬度爲1000px,ie7 6只有1000px*/
26. 對於必定要百分之百通欄的模塊,好比,帶有背景色的版權,或者banner,那麼能夠在lt9的文件夾裏爲ie7 6寫一個不是隻有1000px,而是能夠100%的樣式,可是切記這裏只要有一列,不然就又產生了25中提到的問題,也許,你能夠這麼寫:
lt9 css file .layout{*width:1000px; min-width:1000px;}/*ie8的最小寬度爲1000px,ie7 6只有1000px*/ .one-percent{width:100%;}/*新增的,必定要在layout的後面,不然對於ie6 7不生效*/ html dom <div class="layout one-percent"> <!--code--> </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、彈性圖片。
以上都是我的經驗,不免片面,歡迎討論。