怎么制作一個專業(yè)的響應(yīng)式網(wǎng)站

讓響應(yīng)式網(wǎng)站制作變得簡單！今天主要介紹一些制作響應(yīng)式網(wǎng)站的一些方法，如果你想給自己做個響應(yīng)式網(wǎng)站，不妨試試這些方法！
1. ie9以下（不包括ie9）采用ie條件注釋，為ie8以及一下單獨開一個樣式文件
<!--[if lt IE 9]>
<link href="lt9.css" rel="stylesheet" type="text/css">
<![endif]-->
2. 一個模塊的mq樣式整體放在這個模塊的樣式的之后，符合層疊邏輯，也同時以免被層疊。
3. 祈求在一個相應(yīng)點上同時做變化幾乎是不可能的，因為版式中間的變化，無論是視覺還是具體的編碼人員不可能掌握所有細(xì)節(jié)。
4. 流體布局很關(guān)鍵，%視父級為參照物，這一點雖然很多人都知道，但是實際做的時候卻最容易被忽略。
5. 清除浮動也很重要，切記。
6. 如果你希望邊框、邊距（內(nèi)、外）也在100%的范圍內(nèi)，直接設(shè)置width:auto就好了，不要給予希望在新的css3屬性上，也不要寄希望在-webkit上，-webkit-很容易就會變成下一個ie6了。
7. 合理的嵌套更加健壯，用一個包裝元素來替代設(shè)置當(dāng)前元素margin或者padding。舉例，假如有A和B兩個元素，width是40%，maring-right是10%，這樣很容易在搜索瀏覽器的時候篡位，所以用一個包裝元素C去分別包裹A和B，然給給C設(shè)置50%，A和B分別設(shè)置為80%。這樣就是合理且健壯的嵌套了。
8. 兩行兩列這種設(shè)計，由于流體布局和字?jǐn)?shù)的不同，所以為每一行添加一個包裝元素，更加健壯。也就是說，先做兩行，再在每一行里做兩列。
9. 不要奢望在在每一個像素的寬度上不會出現(xiàn)超出預(yù)期的表現(xiàn)，因為沒有任何人知道頁面在每一個像素寬度時候的表現(xiàn)的樣子，頁面越負(fù)責(zé)可預(yù)期的就越不準(zhǔn)確。所以mq可能真的是“非預(yù)期數(shù)值”（預(yù)期數(shù)值指代在設(shè)計和實現(xiàn)之前約定的響應(yīng)點）
10. 相同區(qū)間的mq和mq會層疊，全局的樣式也會和mq中的樣式層疊，所以屬性盡量不要寫成縮寫。以減少忘記的風(fēng)險。
11. 圖片的自適應(yīng)處理不容易，特別是有邊框的，如果正常條件（沒有利用mq來約束）下設(shè)置了寬和高，在另外一個mq下，僅僅設(shè)置一個屬性是不行的，還是那句話，mq不是二選一（除非是兩個不同的mq區(qū)間），而是層疊??！
12. 如果水平列表的兩端的元素兩端對齊，以四個元素為例，那么除了前三個預(yù)留左邊距，最后一個為零；或者第一個右邊據(jù)為0；后三個有右邊距以外?？梢圆捎玫谝粋€左側(cè)有，最后一個右側(cè)有，中間兩個左右偏移邊距來做，短的一面為 邊距除以空白數(shù)，比如4個列表項，邊距為40,則40除以3。好處么？就是可以保證每一個外包裝為通欄的25%。
13. 四個25%，兩個50% 沒關(guān)系，但是50% 25% 25%就可能會掉下去最后一個，所以24.99，22.49有時還會相差1~2像素。
14. 如果版式變化不大，那么從大到小的寫mq，不必寫一個區(qū)間，只寫大值即可，這樣一層一層的繼承，小尺寸繼承大尺寸，另外，不用過分擔(dān)心選擇器本身權(quán)重的問題，mq會提高其優(yōu)先級。
15. 像導(dǎo)航和版權(quán)這種在pc、pad、phone截然不同的版式。mq，就寫區(qū)間。這樣在區(qū)間外就等于這些dom毫無樣式，這樣就不比擔(dān)心由繼承引發(fā)的覆蓋、優(yōu)先級、重寫以及未知問題。減少了屬性的重寫，提高了效率、降低了修改成本。其實就是等于一個dom，為不同的設(shè)備寫不同的樣式，這些樣式之間不繼承。
16. 如果你希望幾個元素是相對位置不變的話，請將他們包裹，通過這個包裹元素使他們整體與其他元素或元素組做排版，所以一個健壯的響應(yīng)式離不開這些看似“冗余”的包裹元素。但還是以最少的可實現(xiàn)目標(biāo)的dom層級為目標(biāo)。
17. 關(guān)于背景圖，以中心為原點進行“裁剪”是理智的，已某一側(cè)為原點看起來都有點怪。另外可以使用background-size某個值為auto，另外一個使用%
18. 大圖片請寫在一個mq區(qū)間內(nèi)，不要只寫大值，這樣會搞定按需加載的問題。
19. banner樣式實踐
@media (min-width:1110px){
.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}
}/*高度一直填充，兩側(cè)裁剪，這種體驗先看比較好*/
/*以下不同目標(biāo)分辨率載入不同的圖片，保證k數(shù)好，裁剪體驗應(yīng)該一致*/
@media (min-width:769px) and (max-wdth: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的背景圖上鏤空，這樣是不推薦的。在縮小瀏覽器窗口寬度的時候，給人以很明顯很明顯的視覺差，感覺頁面極其不健壯（至少我的感覺是這樣），似乎有隨時要散的感覺。文字也有這感覺，特別是有大量文字的時候。所以你會發(fā)現(xiàn)很多響應(yīng)式好的網(wǎng)站，他的導(dǎo)航的底色都是純色。logo和導(dǎo)航都不鏤空在一張背景圖上。當(dāng)然也有少數(shù)在的，比如adobe。
21. 接20，一般banner圖片幾乎是滿屏的可能高達1980px；而一般如果是居中的話，我們把導(dǎo)航和logo以及一些小功能，比如登錄、搜索控制在1200px大寬度，當(dāng)頁面大于這個大寬度的時候，這個區(qū)域就像釘在了背景圖上，不會導(dǎo)致有兩個圖層的感覺。所以當(dāng)頁面寬度馬上等于大寬度的時候，我們在利用mq重新寫定義下一這個區(qū)域的大寬度，當(dāng)然是該小一點，這樣就解決了20出現(xiàn)的那個問題。
22. png8的問題，ie6下就用純色做底吧。我最理想的想法是，當(dāng)用ie6訪問所有公司web產(chǎn)品的時候，給用戶一個頁面，先登錄QQ帳號，然后下載最新的QQ瀏覽器，然后發(fā)這個用戶10個Q幣。然后瀏覽器界就清靜了。
23. 接21，當(dāng)前mq中的這個區(qū)域的大寬度等于下一個（更小的一個尺寸）mq的尺寸，這樣就用戶的釘在了背景圖的上面了。
24. 對于相同的一些元素，某一個有特殊的樣式，優(yōu)先使用nth-of-type選擇器。在測試ie8以及一下的時候，再為這個特殊的dom添加一個class之類，然后再在那個ie8以及一下的樣式表中書寫復(fù)制響應(yīng)的規(guī)則。
25. body下有一個包裹元素，作為整體彈性的參照，為ie6、ie7單獨寫一個寬度，為什么是1000px，由于很難獲得使用ie6的用戶的分辨率，或者說獲取了之后可能因為數(shù)據(jù)繁多不好決策，所以簡單粗暴，認(rèn)為使用ie6的都是低端設(shè)備用戶，是小顯示器用戶，是1024*768分辨率；至于ie7，設(shè)置了4個25%的浮動，在縮小瀏覽器的過程中都能時不時的掉下去一個，對于小數(shù)點的像素就自動向上補全，太悲哀了。所以如下：
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. 對于一定要百分之百通欄的模塊，比如，帶有背景色的版權(quán)，或者banner，那么可以在lt9的文件夾里為ie7 6寫一個不是只有1000px，而是可以100%的樣式，但是切記這里只要有一列，否則就又產(chǎn)生了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>
<!--code-->
</div>
所以我建議，把banner 主體部分 版權(quán) 三者用三個layout包裹，這樣便于對ie6 ie7 ie8做樣式。
27. 經(jīng)過長達半年的持續(xù)統(tǒng)計，1366px用戶最多，根據(jù)柵格化，n=24為基準(zhǔn)，得出W=(A*n)-i，所以如果要設(shè)置大寬度則設(shè)置為1310px；a=45px,i=10px；不過由于與門戶和電商等網(wǎng)站的排版不同且主要為了彈性版式，所以這里大寬度是我們所需要的，至于45px和10px，以后有固定版式的話可以使用。
28. 響應(yīng)點：1366px 1200px 1110px 768px 568px 414px 320px；768以下的很好理解也方便約束，PC側(cè)的響應(yīng)點是較難控制的，所以前面三個值基本都是按照版式來操作的。原因參見3。
29. 有的人說寫響應(yīng)式從小往大寫，意思是說先寫手機端，然后寫PC端，大致的原因是從大往小寫的話，手機就要層疊和重寫很多樣式，可能會影響性能。理論上，我是贊成的，實際上我并沒有測試過到底性能有多么影響。但是單單從布局的角度上講，從設(shè)計的角度上講，至少我的邏輯是從大往小寫，因為小的基本都是在大的基礎(chǔ)上做刪減和布局的變化，所以寫的時候邏輯比較順暢。不過無論從大到小，還是從小到大，自己順手就好。一般視覺都會先設(shè)計PC的，然后考慮mobile是什么樣的，這一點也使得我是從大到小的去寫。
30. 之前黃老師問我，認(rèn)為響應(yīng)式的難點是在設(shè)計上還是在技術(shù)上，我當(dāng)時說是技術(shù)上沒什么，關(guān)鍵是版式的變化和設(shè)計的體驗?，F(xiàn)在想想。版式變化固然是難點，但是技術(shù)手段也很重要，在這方面的深度和方式的選擇要比版式上的選擇復(fù)雜的多。

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

成都網(wǎng)站建設(shè)  http://www.bm7419.com/

當(dāng)前題目：怎么制作一個專業(yè)的響應(yīng)式網(wǎng)站
網(wǎng)站網(wǎng)址：http://www.bm7419.com/news45/77195.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有響應(yīng)式網(wǎng)站等

廣告

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