談響應(yīng)式web設(shè)計(jì)代碼實(shí)現(xiàn)

1 評(píng)論 8495 瀏覽 5 收藏 14 分鐘

在研究響應(yīng)式的時(shí)候,記錄了一些感想,分享出來,拋磚引玉,希望可以和大家一起討論??偨Y(jié)下來,響應(yīng)式比之前想象的要復(fù)雜得多。

1. ie9以下(不包括ie9)采用ie條件注釋,為ie8以及一下單獨(dú)開一個(gè)樣式文件

1
2
3
<!--[if lt IE 9]>
<link href="lt9.css" rel="stylesheet" type="text/css">
<![endif]-->

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

3. 祈求在一個(gè)相應(yīng)點(diǎn)上同時(shí)做變化幾乎是不可能的,因?yàn)榘媸街虚g的變化,無論是視覺還是具體的編碼人員不可能掌握所有細(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è)包裝元素來替代設(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è)包裝元素,更加健壯。也就是說,先做兩行,再在每一行里做兩列。

9. 不要奢望在在每一個(gè)像素的寬度上不會(huì)出現(xiàn)超出預(yù)期的表現(xiàn),因?yàn)闆]有任何人知道頁面在每一個(gè)像素寬度時(shí)候的表現(xiàn)的樣子,頁面越負(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中的樣式層疊,所以屬性盡量不要寫成縮寫。以減少忘記的風(fēng)險(xiǎn)。

11. 圖片的自適應(yīng)處理不容易,特別是有邊框的,如果正常條件(沒有利用mq來約束)下設(shè)置了寬和高,在另外一個(gè)mq下,僅僅設(shè)置一個(gè)屬性是不行的,還是那句話,mq不是二選一(除非是兩個(gè)不同的mq區(qū)間),而是層疊??!

12. 如果水平列表的兩端的元素兩端對(duì)齊,以四個(gè)元素為例,那么除了前三個(gè)預(yù)留左邊距,最后一個(gè)為零;或者第一個(gè)右邊據(jù)為0;后三個(gè)有右邊距以外??梢圆捎玫谝?個(gè)左側(cè)有,最后一個(gè)右側(cè)有,中間兩個(gè)左右偏移邊距來做,短的一面為 邊距除以空白數(shù),比如4個(gè)列表項(xiàng),邊距為40,則40除以3。好處么?就是可以保證每一個(gè)外包裝為通欄的25%。

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

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

15. 像導(dǎo)航和版權(quán)這種在pc、pad、phone截然不同的版式。mq,就寫區(qū)間。這樣在區(qū)間外就等于這些dom毫無樣式,這樣就不比擔(dān)心由繼承引發(fā)的覆蓋、 優(yōu)先級(jí)、重寫以及未知問題。減少了屬性的重寫,提高了效率、降低了修改成本。其實(shí)就是等于一個(gè)dom,為不同的設(shè)備寫不同的樣式,這些樣式之間不繼承。

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

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

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

19. banner樣式實(shí)踐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media (min-width:1110px){
.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}
}/*高度一直填充,兩側(cè)裁剪,這種體驗(yàn)先看比較好*/
/*以下不同目標(biāo)分辨率載入不同的圖片,保證k數(shù)最佳,裁剪體驗(yàn)應(yīng)該一致*/
@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的背景圖上鏤空,這樣是不推薦的。在縮小瀏覽器窗口寬度的時(shí)候,給人以很明顯很明顯的視覺差,感覺頁面極其不健壯(至少我的 感覺是這樣),似乎有隨時(shí)要散的感覺。文字也有這感覺,特別是有大量文字的時(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)頁面大于這個(gè)最大寬度的時(shí)候,這個(gè)區(qū)域就像釘在了背景圖上,不會(huì)導(dǎo)致有兩個(gè)圖層的感覺。所以當(dāng)頁面寬度馬上等于最大寬度的時(shí)候, 我們?cè)诶胢q重新寫定義下一這個(gè)區(qū)域的最大寬度,當(dāng)然是該小一點(diǎn),這樣就解決了20出現(xiàn)的那個(gè)問題。

22. png8的問題,ie6下就用純色做底吧。我最理想的想法是,當(dāng)用ie6訪問所有公司web產(chǎn)品的時(shí)候,給用戶一個(gè)頁面,先登錄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之類,然后再在那個(gè)ie8以及一下的樣式表中書寫復(fù)制響應(yīng)的規(guī)則。

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

1
2
3
4
5
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. 對(duì)于一定要百分之百通欄的模塊,比如,帶有背景色的版權(quán),或者banner,那么可以在lt9的文件夾里為ie7 6寫一個(gè)不是只有1000px,而是可以100%的樣式,但是切記這里只要有一列,否則就又產(chǎn)生了25中提到的問題,也許,你可以這么寫:

1
2
3
4
5
6
7
8
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8的最小寬度為1000px,ie7 6只有1000px*/
.one-percent{width:100%;}/*新增的,一定要在layout的后面,否則對(duì)于ie6 7不生效*/
?
html dom
<div class="layout one-percent">
<!--code-->
</div>

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

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

28. 響應(yīng)點(diǎn):1366px 1200px 1110px 768px 568px 414px 320px;768以下的很好理解也方便約束,PC側(cè)的響應(yīng)點(diǎn)是較難控制的,所以前面三個(gè)值基本都是按照版式來操作的。原因參見3。

29. 有的人說寫響應(yīng)式從小往大寫,意思是說先寫手機(jī)端,然后寫PC端,大致的原因是從大往小寫的話,手機(jī)就要層疊和重寫很多樣式,可能會(huì)影響性能。理論上,我 是贊成的,實(shí)際上我并沒有測(cè)試過到底性能有多么影響。但是單單從布局的角度上講,從設(shè)計(jì)的角度上講,至少我的邏輯是從大往小寫,因?yàn)樾〉幕径际窃诖蟮幕?礎(chǔ)上做刪減和布局的變化,所以寫的時(shí)候邏輯比較順暢。不過無論從大到小,還是從小到大,自己順手就好。一般視覺都會(huì)先設(shè)計(jì)PC的,然后考慮mobile是 什么樣的,這一點(diǎn)也使得我是從大到小的去寫。

30. 之前黃老師問我,認(rèn)為響應(yīng)式的難點(diǎn)是在設(shè)計(jì)上還是在技術(shù)上,我當(dāng)時(shí)說是技術(shù)上沒什么,關(guān)鍵是版式的變化和設(shè)計(jì)的體驗(yàn)?,F(xiàn)在想想。版式變化固然是難點(diǎn),但是技術(shù)手段也很重要,在這方面的深度和方式的選擇要比版式上的選擇復(fù)雜的多。

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

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

 

原文來自:騰訊isux

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. …弄個(gè)圖片,設(shè)置一下寬高 居然變成學(xué)問了?響應(yīng)式不是畫畫 謝謝

    來自黑龍江 回復(fù)