在一開(kāi)始學(xué)習(xí)響應(yīng)式布局的時(shí)候，我就覺(jué)得響應(yīng)式布局是一個(gè)很麻煩的東西囱桨⊥蚰模可是我沒(méi)有想到會(huì)這么麻煩…
在我做第一個(gè)響應(yīng)式布局的時(shí)候，我那個(gè)時(shí)候是直接用css寫的脐恩，我覺(jué)得我應(yīng)該讓我的代碼優(yōu)化一些镐侯，然后我就看著主頁(yè)的三個(gè)尺寸，就開(kāi)始研究驶冒。
研究到一定的結(jié)果之后苟翻，我就開(kāi)始動(dòng)手制作首頁(yè)，那個(gè)時(shí)候?qū)Π俜直绕郏瑀em崇猫，em等都不熟悉，制作的時(shí)候沒(méi)掌握好需忿。然后诅炉，我就東改改西改改，一部分運(yùn)用百分比屋厘，一部分運(yùn)用media改變px涕烧，就這樣把首頁(yè)給馬馬虎虎的完成了。
雖然代碼有點(diǎn)亂汗洒，但還是完成了议纯。
正當(dāng)開(kāi)心的想開(kāi)始研究下一頁(yè)的時(shí)候，我就傻了…
我發(fā)現(xiàn)兩個(gè)頁(yè)面有很多一樣的地方仲翎，然而在做主頁(yè)的時(shí)候痹扇，我都好仔細(xì)的把每個(gè)class的父級(jí)寫出來(lái)铛漓，所以，現(xiàn)在我就傻了鲫构。我現(xiàn)在的代碼根本就不能重用浓恶。
再把其它頁(yè)面翻完，我發(fā)現(xiàn)他們居然相似度極高结笨，可是包晰，我在研究首頁(yè)的時(shí)候，卻只考慮到首頁(yè)個(gè)個(gè)尺寸之間的比例炕吸，木有考慮頁(yè)面與頁(yè)面之間的關(guān)系伐憾。這是一個(gè)大失誤。
于是赫模，我開(kāi)始研究他們之間相同的地方树肃。接著我就開(kāi)始把這些相同的地方給整合起來(lái)，然后再去修改我的主頁(yè)面瀑罗，把他們之間相同的類給提取出來(lái)胸嘴，作為公共類。
經(jīng)過(guò)一番修改斩祭，我又一次把我的主頁(yè)面修改完成了劣像，可是，我的css代碼卻變得更加亂了…
這時(shí)候摧玫，我沒(méi)有去管理我那混亂的代碼耳奕，而是繼續(xù)寫后面的頁(yè)面。
根據(jù)后面的頁(yè)面诬像，這次屋群，我懂得把相同的地方給提取出來(lái)，把主要的結(jié)構(gòu)給做出來(lái)颅停，再來(lái)改細(xì)節(jié)谓晌。
我把整個(gè)網(wǎng)站完善之后，在測(cè)試的時(shí)候癞揉，就會(huì)發(fā)現(xiàn)其中的一些問(wèn)題，結(jié)果表明溺欧，我還沒(méi)沒(méi)有仔細(xì)的想好喊熟，就動(dòng)手了，有的需要用百分比的地方姐刁，我卻用了固定值芥牌，只在media里面修改其值的變化，在media沒(méi)有設(shè)定的中間部分聂使，有的地方會(huì)產(chǎn)生一些問(wèn)題壁拉。設(shè)置在屏幕的下面會(huì)出現(xiàn)滾動(dòng)條谬俄。
慢慢的修改完全部的代碼之后，我發(fā)現(xiàn)我的代碼已經(jīng)非称恚混亂了溃论，盡管我已經(jīng)盡量使它們分類了…
在字體方面，我使用的也是px痘昌，在幾個(gè)media中分別修改它們的大小…
說(shuō)了這么多钥勋，其實(shí)，我就是想提醒自己辆苔，盡量不要再犯一樣的錯(cuò)誤算灸。
由于上一次的代碼寫的比較混亂，所以我決定重新寫一遍css樣式驻啤。這次我要讓我的代碼變得整齊菲驴，讓我的代碼得到優(yōu)化。
所以這次我選擇用ccss來(lái)寫骑冗，為了讓我的media更加方便赊瞬。
這次我用來(lái)做響應(yīng)式最多的是用rem和百分比，這兩個(gè)都是做響應(yīng)式比較方便的沐旨。
每次在制作之前我都會(huì)考慮應(yīng)該要森逮，用rem或者是用百分比。
css樣式中磁携，用sass的循環(huán)來(lái)對(duì)media進(jìn)行計(jì)算褒侧，對(duì)HTML的font-size進(jìn)行修改，方便谊迄，快捷闷供。
接下來(lái)，我來(lái)說(shuō)說(shuō)應(yīng)該怎么去做可以更好…
1.先觀察各個(gè)不同尺寸的頁(yè)面统诺，它們之間的相同點(diǎn)和區(qū)別歪脏。
2.接下來(lái)還要觀察，各個(gè)頁(yè)面之間的相同點(diǎn)粮呢。盡可能的把相同點(diǎn)給提取出來(lái)婿失，作為公共類使用。這樣和你可以讓代碼得到進(jìn)一步的優(yōu)化啄寡。
3.盡可能的觀察仔細(xì)最好用本子記錄下來(lái)豪硅。這樣可以方便你的查閱還有對(duì)網(wǎng)頁(yè)的制作。在觀察的階段挺物，不要害怕花費(fèi)時(shí)間懒浮，如果你觀察好了，準(zhǔn)確了识藤，制作的過(guò)程砚著，就可以節(jié)省很多的代碼優(yōu)化的時(shí)間次伶。也可以讓你的代碼更加的簡(jiǎn)潔清晰。
4.在代碼的制作方面稽穆，你要觀察你的這個(gè)地方是需要用百分比比較好呢還是用rem或者用em來(lái)設(shè)計(jì)還是用固定值比較好冠王。
一般情況下，隨著屏幕的大小的變化而變化的使用百分比是比較好的秧骑。
在media相同的情況下版确，各個(gè)部分修改的比例是一樣的，這種情況就適合用rem乎折。
字體的話可以用循環(huán)來(lái)改變绒疗，同樣的需要使用rem才能方便的統(tǒng)一修改。
注意：所有設(shè)置rem的地方都要統(tǒng)一考量它們的比例骂澄。
By : Yimi-shan
