一段時間之前(qián)我對響(xiǎng)應式的(dí)概念還(huán)是(shì)Bootstrap，Amaze之類的框(kuàng)架組件(jiàn)，用過幾次也(yě)不以(yǐ)為(wéi)然(rán)，我想國內搜(sōu)索(suǒ)引(yǐn)擎在提供移(yí)動搜索結(jié)果頁時(shí)還是會給(gěi)移(yí)動網站加分的，卻不(bù)能像google一樣識(shí)別響(xiǎng)應式網站，可能還需要一段時(shí)間發展(zhǎn)。但毫無(wú)疑問的是現在(zài)Web趨(qū)勢轉(zhuǎn)向(xiàng)移動(dòng)優先，當然如(rú)果你用(yòng)域(yù)名(míng)或(huò)者其他(tā)解決(jué)方案也不是不可以，隻是(shì)響應(yīng)式(shì)可能(néng)更(gēng)簡(jiǎn)單(dān)一(yī)些，發(fā)展(zhǎn)前(qián)景(jǐng)也(yě)是不錯(cuò)的。
這兩三個星期我(wǒ)每(měi)天都在寫響(xiǎng)應式(shì)頁(yè)麵，借(jiè)此(cǐ)累積了不少響(xiǎng)應(yīng)式(shì)頁(yè)麵和(hé)ajax的經驗。我(wǒ)大(dà)致的梳(shū)理了幾個響應(yīng)式頁(yè)麵的重(zhòng)點，如果(guǒ)想(xiǎng)往這方麵發展(zhǎn)或是(shì)對它有些興(xīng)趣，希(xī)望能(néng)給(gěi)大(dà)家一(yī)點幫助(zhù)。
控(kòng)製大小
習(xí)慣了(liǎo)PC頁(yè)麵的前(qián)端(duān)開(kāi)發者(zhě)可能更(gēng)加(jiā)喜歡(huān)用pc來(lái)控(kòng)製大小(xiǎo)，但在(zài)響應式(shì)的頁(yè)麵(miàn)中(zhōng)出(chū)現更多(duō)的(dí)是(shì)em和rem，用它(tā)們(mén)來(lái)控(kòng)製字體大(dà)小甚(shèn)至是框(kuàng)體大(dà)小對整(zhěng)體(tǐ)的(dí)效果非常明顯。
打(dǎ)個比方(fāng)，我的字體設置是10px/20px/30px等等(děng)不同的(dí)，網站上不同的(dí)地(dì)方(fāng)自(zì)然(rán)字體(tǐ)會有大小(xiǎo)的(dí)差(chà)異這是必(bì)然的(dí)，如(rú)果一(yī)個(gè)頁麵足(zú)夠復(fù)雜或是(shì)文字(zì)足(zú)夠多(duō)的話，這(zhè)些(xiē)字體(tǐ)的(dí)大小設置也(yě)是一(yī)個(gè)量(liáng)很(hěn)大(dà)的工作(zuò)，不過(guò)在(zài)響(xiǎng)應式頁(yè)麵(miàn)中你(nǐ)設(shè)計完它(tā)們並(bìng)不(bù)是完事：你(nǐ)用手機(jī)瀏(liú)覽(lǎn)一下頁麵會發現字(zì)體會(huì)撐的很(hěn)大(dà)，甚至(zhì)有(yǒu)個別(bié)標題撐(chēng)滿了手機(jī)屏幕，這對(duì)移動端用戶(hù)的(dí)體驗(yàn)影響可想(xiǎng)而知。因此你要開始(shǐ)寫媒(méi)體查詢，然後發現一個頁麵(miàn)有幾(jī)十(shí)個字(zì)體需(xū)要設置，如果(guǒ)把它們在(zài)不(bù)同分辨(biàn)率下(xià)一一(yī)調整(zhěng)你可能需要(yào)寫(xiě)百句(jù)以上(shàng)的(dí)CSS代碼(mǎ)，但如果(guǒ)你(nǐ)用em/rem，就(jiù)能(néng)夠把工作量(liáng)大大減小(xiǎo)，同時還能(néng)夠(gòu)保證字體(tǐ)的(dí)統一比例(lì)。
關(guān)於(yú)em/rem的解釋大(dà)家可(kě)以自(zì)行搜索，網(wǎng)上這(zhè)類教(jiào)程(chéng)數不勝(shèng)數，實際(jì)上它們就(jiù)和px一樣(yàng)簡(jiǎn)單(dān)，當我(wǒ)開(kāi)始用(yòng)之(zhī)後(hòu)也不過(guò)隻花(huā)了(liǎo)幾分(fēn)鐘熟(shú)悉它(tā)們。就像前麵說的(dí)一樣，你(nǐ)也(yě)可(kě)以用(yòng)它(tā)們(mén)來(lái)控(kòng)製(zhì)框(kuàng)體的(dí)大小，然後(hòu)再響應(yīng)式的(dí)頁(yè)麵下統一縮放，當然(rán)這需要(yào)足夠(gòu)多(duō)的計算(suàn)。另(lìng)外(wài)值(zhí)得一(yī)提的是字體(tǐ)圖標(biāo)也可以(yǐ)用它(tā)們來控(kòng)製，具體可以(yǐ)參考不同“字(zì)體(tǐ)圖標”的官(guān)方文(wén)檔。
百分(fēn)比(bǐ)
解(jiě)決縮(suō)放(fàng)問題的思路(lù)有(yǒu)好幾種，最(zuì)適合新手(shǒu)的(dí)無疑是(shì)百(bǎi)分比式的布局，在關鍵的寬度設(shè)置(zhì)下(xià)百(bǎi)分(fēn)比(bǐ)能夠起(qǐ)到(dào)出乎意料的效(xiào)果：
box1{ width:100%;}
ul{ margin:0 2%;}
我並不是(shì)推崇全(quán)部(bù)使用百(bǎi)分比來布(bù)局(jú)，但(dàn)有時候這(zhè)可(kě)能會(huì)大大減少(shǎo)工作(zuò)量，給(gěi)box1寬度設置100%之(zhī)後(hòu)它會自(zì)動以寬度填(tián)充滿整個瀏(liú)覽器，不(bù)管你(nǐ)是手機(jī)PC什麼分(fēn)辨率，它總是(shì)有(yǒu)很好(hǎo)的(dí)表現。這(zhè)時候(hòu)你(nǐ)給box1下麵的(dí)ul設置(zhì)左右2%的margin也是如(rú)此(cǐ)，隨著(zhuó)瀏覽(lǎn)器(qì)窗口(kǒu)大小改變時ul的實際margin大(dà)小(xiǎo)也會隨著變化(huà)，這麼(mó)一說大(dà)家多少也都理(lǐ)解了(liǎo)百分(fēn)比布局的(dí)概念(niàn)。
當然(rán)有時候也不會有(yǒu)想象中的效(xiào)果，特(tè)別(bié)是(shì)在較(jiào)小(xiǎo)的分辨率上時(shí)，原來看似不(bù)錯的(dí)百(bǎi)分(fēn)比設定(dìng)會(huì)顯得很怪(guài)，因為響(xiǎng)應式多(duō)數(shù)時(shí)候(hòu)隻約定寬度(dù)，長度(dù)都(dū)是由文檔和(hé)瀏覽(lǎn)器(qì)來決定的，這時候(hòu)想要在所有的終(zhōng)端上(shàng)都(dū)有很好的體驗就(jiù)需要Media Query來解決(jué)問題。
Media Query
通俗(sú)的(dí)解(jiě)釋(shì)就(jiù)是CSS的媒(méi)體查詢功(gōng)能(néng)，它既能(néng)夠(gòu)準(zhǔn)確(què)的識別(bié)設(shè)備也(yě)能夠自己(jǐ)設(shè)定(dìng)分辨率(shuài)或者(zhě)寬(kuān)度，w3cshool裏(lǐ)有(yǒu)Media Query的(dí)參考(kǎo)文(wén)檔(dàng)，如果你嫌文檔太(tài)多(duō)我(wǒ)可以粗略(lüè)的解釋一下它的工作原理。
在有必要的時候(hòu)你(nǐ)可能會(huì)給(gěi)一個(gè)box設置(zhì)高度，當(dāng)box擁(yōng)有500px高度(dù)時(shí)它(tā)可(kě)能在(zài)PC上看起(qǐ)來(lái)不錯，但用手(shǒu)機(jī)打(dǎ)開時就(jiù)有(yǒu)些嚇人(rén)了(liǎo)，整(zhěng)個(gè)box充(chōng)斥了頁麵，裏麵(miàn)的內(nèi)容(róng)排(pái)列(liè)混(hùn)亂，嚴(yán)重的(dí)影響(xiǎng)了用戶(hù)體(tǐ)驗，這(zhè)時(shí)候(hòu)你就可以(yǐ)使用(yòng)媒體(tǐ)查詢Media Query，用它單獨的為不(bù)同(tóng)大小(xiǎo)的(dí)設置(zhì)不(bù)同的高(gāo)度(dù)，比如(rú)640/320打開時box時(shí)就(jiù)分別處(chǔ)於300/200px的(dí)高(gāo)度，這(zhè)樣(yàng)看起(qǐ)來就不錯(cuò)了。
大家可(kě)能(néng)會(huì)想到import，實際上(shàng)媒體查(chá)詢就(jiù)可以這樣理解，它(tā)為(wéi)不同的寬(kuān)度或設(shè)備(bèi)設(shè)定(dìng)了類似(sì)於(yú)import的css規則(zé)，保(bǎo)證(zhèng)了實(shí)際渲(xuàn)染(rǎn)完成(chéng)頁麵(miàn)的(dí)效果。
媒體查(chá)詢(xún)也(yě)可(kě)以為一個頁麵準(zhǔn)備多個(gè)不同的(dí)CSS，當設備(bèi)大(dà)小不同時(shí)使用不同的CSS文(wén)件，如果(guǒ)樣式文件(jiàn)比(bǐ)較(jiào)大也(yě)可(kě)以(yǐ)考慮這種(zhǒng)方法。
說說(shuō)框架
我見到過(guò)和(hé)實(shí)際(jì)使(shǐ)用(yòng)的前端框架中(zhōng)，不(bù)少都(dū)是富前(qián)端類(lèi)型(xíng)的設(shè)計(jì)，並不建議新(xīn)手(shǒu)前端盲目的使(shǐ)用(yòng)框(kuàng)架(jià)來(lái)布局，不(bù)管框(kuàng)架看起來多美(měi)好。在(zài)實(shí)際的(dí)使用(yòng)過程中(zhōng)大家可能會發(fā)現很(hěn)多問題，比如類名(míng)太多太復雜（在沒有(yǒu)很(hěn)多的css經驗(yàn)時可能對約定的類(lèi)名所(suǒ)知甚少(shǎo)），樣式衝突(tū)。引(yǐn)入資源過多導(dǎo)致頁麵繁(fán)重，偏離設計效(xiào)果等等(děng)。
就拿(ná)bootstrap來(lái)說，如果你要(yào)設(shè)計一個類似(sì)於google的(dí)搜索框就顯得(dé)很難，google類型的(dí)搜(sōu)索框(kuàng)實際上(shàng)是將一個(gè)input包含在(zài)box裏麵，然(rán)後在(zài)這個(gè)box裏(lǐ)麵(miàn)再加上左右圖標，如果你用(yòng)bootstrap來做可能會出(chū)現很(hěn)多(duō)莫(mò)名奇妙(miào)的(dí)衝(chōng)突，但(dàn)實際(jì)上你得(dé)到了什(shí)麼呢(ní)？一個圓角一個行(háng)高(gāo)？還是他(tā)的百分比寬度呢？這些用css來(lái)寫隻不過是(shì)幾句(jù)代(dài)碼(mǎ)的事(shì)。
還有一(yī)些框架(jià)過度的依賴AJAX，它們(mén)也(yě)許想法很好，大(dà)量的AJAX在(zài)前(qián)端看起(qǐ)來的確很酷，對(duì)用(yòng)戶的(dí)友好性也(yě)足夠(gòu)強，但(dàn)大量(liáng)的請求(qiú)對(duì)服(fú)務(wù)器(qì)並不(bù)友好(hǎo)，可能會(huì)使服務(wù)器(qì)的(dí)實(shí)際(jì)負載大(dà)大(dà)下(xià)降(jiàng)。總(zǒng)之還(huán)是一(yī)句(jù)話(huà)，按實(shí)際需求(qiú)來(lái)解決(jué)問題(tí)，框(kuàng)架(jià)並(bìng)不是萬(wàn)能(néng)的(dí)。
注：相(xiāng)關網站建(jiàn)設技巧閱讀請移步到(dào)建(jiàn)站教(jiào)程頻道(dào)。
轉(zhuǎn)載(zǎi)請保留原(yuán)文(wén)地址: https://antelcom.cn/show-414.html