為什么要建立響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？
隨著通過(guò)手機(jī)和平板電腦登錄的用戶數(shù)量的增加，智能站點(diǎn)所有者（其中很多是電子商務(wù)領(lǐng)域的所有者）意識(shí)到，他們必須迅速找到一種回收該細(xì)分市場(chǎng)的方法。
即使結(jié)合了跨瀏覽器功能，用于PC上顯示的站點(diǎn)仍在小型移動(dòng)設(shè)備上提供了本質(zhì)上不可用的體驗(yàn)。重新設(shè)計(jì)仍然不能完全令人滿意，因此有些人只是簡(jiǎn)單地建立了第二個(gè)站點(diǎn)，專門針對(duì)移動(dòng)設(shè)備。
當(dāng)然，重復(fù)的站點(diǎn)存在其自身的問(wèn)題，但有些人認(rèn)為風(fēng)險(xiǎn)可以接受……至少比失去很大一部分市場(chǎng)份額更可接受。
一個(gè)單獨(dú)的站點(diǎn)意味著一開始和正在進(jìn)行的額外費(fèi)用。有許多負(fù)面影響，收益有限。更糟糕的是，它仍然只滿足一些移動(dòng)顯示問(wèn)題。簡(jiǎn)而言之，這不是解決方案。這只是一個(gè)創(chuàng)可貼。
用正確的方式做事
隨著HTML5 + CSS3的出現(xiàn)，似乎有更好的方法來(lái)完成很少有人管理的事情，并在單個(gè)站點(diǎn)上完成。HTML5得到了足夠的關(guān)注，人們開始注意到它。
然后，當(dāng)W3C將媒體查詢添加到組合中時(shí)，一些開發(fā)人員意識(shí)到了這種可能性，并決定對(duì)其進(jìn)行測(cè)試。也許不是為預(yù)期的顯示類型設(shè)計(jì)站點(diǎn)，而是標(biāo)準(zhǔn)化的站點(diǎn)設(shè)計(jì)可以使任何尺寸的顯示都合理。
RWD如何運(yùn)作？
RWD的主要概念是創(chuàng)建一個(gè)基本設(shè)計(jì)，并通過(guò)使用CSS覆蓋布局結(jié)構(gòu)來(lái)使其具有適應(yīng)性，并根據(jù)顯示設(shè)備的視口創(chuàng)建流暢的布局。
因此，iPhone可能會(huì)顯示一列布局，而平板電腦會(huì)顯示兩列，而PC會(huì)顯示四列…全部通過(guò)CSS3進(jìn)行媒體查詢。
使用HTML5 + CSS3，可以通過(guò)將頁(yè)眉，頁(yè)腳，側(cè)邊欄和內(nèi)容封裝在換頁(yè)容器中來(lái)啟用此功能。然后將HTML5元素重置為阻止。
基本設(shè)計(jì)是在標(biāo)準(zhǔn)CSS中處理的，但是媒體查詢會(huì)選擇各種CSS3元素，以根據(jù)所服務(wù)的設(shè)備自定義布局。
最后，各種元素的顯示寬度由標(biāo)準(zhǔn)的百分比設(shè)置，以適合每個(gè)移動(dòng)設(shè)備，就像處理圖像和嵌入式視頻一樣。