日照網(wǎng)站建設(shè)_關(guān)于響應(yīng)式網(wǎng)站建設(shè)設(shè)計(jì)

響應(yīng)式網(wǎng)站建設(shè)設(shè)計(jì)（Responsive Web Design，RWD）在近幾年風(fēng)靡一時(shí)。但是，人們大多只是在不停念叨網(wǎng)站的“響應(yīng)式”是多么重要，而極少有人去深入探討怎樣才能做好響應(yīng)式設(shè)計(jì)。

比較常見(jiàn)的實(shí)踐是用多種分辨率來(lái)測(cè)試一個(gè)網(wǎng)站，然后添加越來(lái)越多的媒體查詢(xún)（Media Query）規(guī)則來(lái)修補(bǔ)網(wǎng)站在這些分辨率下出現(xiàn)的問(wèn)題。然而對(duì)于今后的 CSS 改動(dòng)來(lái)說(shuō)，每個(gè)媒體查詢(xún)都會(huì)增加成本，而這種成本是不應(yīng)輕易上升的。未來(lái)每次對(duì) CSS 代碼的修改都要求我們逐一核對(duì)這些媒體查詢(xún)是否需要配合修改，甚至可能要求我們反過(guò)來(lái)修改這些媒體查詢(xún)的設(shè)置。這一點(diǎn)常常被我們忽略，后患無(wú)窮。你添加的媒體查詢(xún)?cè)蕉啵愕?CSS 代碼就會(huì)變得越來(lái)越經(jīng)不起折騰。

這并不是說(shuō)媒體查詢(xún)是一種不良實(shí)踐。只要用對(duì)了，它就是利器。但是，你只應(yīng)該把它作為末尾的手段。比如你想把網(wǎng)站做得彈性靈活，但其他嘗試全都失敗了；或者我們希望在較大或較小的視口下完全改變網(wǎng)站的設(shè)計(jì)形態(tài)（譬如，把側(cè)欄改成水平布局）。我這么說(shuō)的原因在于，媒體查詢(xún)不能以一種連續(xù)的方式來(lái)修復(fù)問(wèn)題。它們的工作原理基于某幾個(gè)特定的階梯（亦稱(chēng)“斷點(diǎn)”），如果大部分樣式代碼并不是以彈性的方式來(lái)編寫(xiě)的，那么媒體查詢(xún)能做的只是修補(bǔ)某個(gè)特定分辨率下的特定問(wèn)題——這本質(zhì)上只是把灰塵掃到地毯下面而已。

當(dāng)然，有一點(diǎn)上面并沒(méi)有提到，媒體查詢(xún)的斷點(diǎn)不應(yīng)該由具體的設(shè)備來(lái)決定，而應(yīng)該根據(jù)設(shè)計(jì)自身來(lái)決定。這不僅是因?yàn)槲覀兊木W(wǎng)站需要面向的設(shè)備太多了（尤其是考慮到未來(lái)的設(shè)備時(shí)），還因?yàn)橐粋€(gè)網(wǎng)站在桌面端可能會(huì)以任意尺寸的窗口來(lái)顯示。如果你有信心自己的設(shè)計(jì)在任何可能出現(xiàn)的視口尺寸下都能良好工作，誰(shuí)關(guān)心這些設(shè)備的分辨率具體是多少呢？

遵從“盡量減少代碼重復(fù)”所描述的原則對(duì)此也是有幫助的，因?yàn)槟悴恍枰ジ采w媒體查詢(xún)里同樣數(shù)量的聲明。這在本質(zhì)上減輕了它們所產(chǎn)生的維護(hù)成本。

以上是日照網(wǎng)站建設(shè)公司（昊諾網(wǎng)絡(luò)公司）所分享，您要是喜歡該網(wǎng)站建設(shè)的知識(shí)，請(qǐng)關(guān)注我們網(wǎng)站更多的動(dòng)態(tài)！