在一開始學(xué)習(xí)響應(yīng)式布局的時候，我就覺得響應(yīng)式布局是一個很麻煩的東西。可是我沒有想到會這么麻煩…

在我做第一個響應(yīng)式布局的時候，我那個時候是直接用css寫的，我覺得我應(yīng)該讓我的代碼優(yōu)化一些，然后我就看著主頁的三個尺寸，就開始研究。

研究到一定的結(jié)果之后，我就開始動手制作首頁，那個時候?qū)Π俜直?，rem，em等都不熟悉，制作的時候沒掌握好。然后，我就東改改西改改，一部分運用百分比，一部分運用media改變px，就這樣把首頁給馬馬虎虎的完成了。

雖然代碼有點亂，但還是完成了。

正當(dāng)開心的想開始研究下一頁的時候，我就傻了…

我發(fā)現(xiàn)兩個頁面有很多一樣的地方，然而在做主頁的時候，我都好仔細的把每個class的父級寫出來，所以，現(xiàn)在我就傻了。我現(xiàn)在的代碼根本就不能重用。

再把其它頁面翻完，我發(fā)現(xiàn)他們居然相似度極高，可是，我在研究首頁的時候，卻只考慮到首頁個個尺寸之間的比例，木有考慮頁面與頁面之間的關(guān)系。這是一個大失誤。

于是，我開始研究他們之間相同的地方。接著我就開始把這些相同的地方給整合起來，然后再去修改我的主頁面，把他們之間相同的類給提取出來，作為公共類。

經(jīng)過一番修改，我又一次把我的主頁面修改完成了，可是，我的css代碼卻變得更加亂了…

這時候，我沒有去管理我那混亂的代碼，而是繼續(xù)寫后面的頁面。

根據(jù)后面的頁面，這次，我懂得把相同的地方給提取出來，把主要的結(jié)構(gòu)給做出來，再來改細節(jié)。

我把整個網(wǎng)站完善之后，在測試的時候，就會發(fā)現(xiàn)其中的一些問題，結(jié)果表明，我還沒沒有仔細的想好，就動手了，有的需要用百分比的地方，我卻用了固定值，只在media里面修改其值的變化，在media沒有設(shè)定的中間部分，有的地方會產(chǎn)生一些問題。設(shè)置在屏幕的下面會出現(xiàn)滾動條。

慢慢的修改完全部的代碼之后，我發(fā)現(xiàn)我的代碼已經(jīng)非常混亂了，盡管我已經(jīng)盡量使它們分類了…

在字體方面，我使用的也是px，在幾個media中分別修改它們的大小…

說了這么多，其實，我就是想提醒自己，盡量不要再犯一樣的錯誤。

由于上一次的代碼寫的比較混亂，所以我決定重新寫一遍css樣式。這次我要讓我的代碼變得整齊，讓我的代碼得到優(yōu)化。

所以這次我選擇用ccss來寫，為了讓我的media更加方便。

這次我用來做響應(yīng)式最多的是用rem和百分比，這兩個都是做響應(yīng)式比較方便的。

每次在制作之前我都會考慮應(yīng)該要，用rem或者是用百分比。

css樣式中，用sass的循環(huán)來對media進行計算，對HTML的font-size進行修改，方便，快捷。

接下來，我來說說應(yīng)該怎么去做可以更好…

1.先觀察各個不同尺寸的頁面，它們之間的相同點和區(qū)別。

2.接下來還要觀察，各個頁面之間的相同點。盡可能的把相同點給提取出來，作為公共類使用。這樣和你可以讓代碼得到進一步的優(yōu)化。

3.盡可能的觀察仔細最好用本子記錄下來。這樣可以方便你的查閱還有對網(wǎng)頁的制作。在觀察的階段，不要害怕花費時間，如果你觀察好了，準確了，制作的過程，就可以節(jié)省很多的代碼優(yōu)化的時間。也可以讓你的代碼更加的簡潔清晰。

4.在代碼的制作方面，你要觀察你的這個地方是需要用百分比比較好呢還是用rem或者用em來設(shè)計還是用固定值比較好。

一般情況下，隨著屏幕的大小的變化而變化的使用百分比是比較好的。

在media相同的情況下，各個部分修改的比例是一樣的，這種情況就適合用rem。

字體的話可以用循環(huán)來改變，同樣的需要使用rem才能方便的統(tǒng)一修改。

注意：所有設(shè)置rem的地方都要統(tǒng)一考量它們的比例。

By : Yimi-shan