響應(yīng)式web網(wǎng)站設(shè)計(jì)制作方法

1. ie9以下（不包括ie9）采用ie條件注釋，為ie8以及一下單獨(dú)開一個(gè)樣式文件
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ū)間），而是層疊?。?br />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ì)搞定按需加載的問題。

分享題目：響應(yīng)式web網(wǎng)站設(shè)計(jì)制作方法
網(wǎng)頁路徑：http://muchs.cn/news38/284288.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、響應(yīng)式網(wǎng)站、定制網(wǎng)站、Google、App設(shè)計(jì)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)