自適應(yīng)式頁面指的是同一頁面在不同屏幕尺寸下實(shí)現(xiàn)不同的布局，從而使一個(gè)頁面兼容不同的終端。這里所說的終端主要包括PC端和移動(dòng)端，它們的分辨率以及屏幕大小都是不同的。在網(wǎng)站開發(fā)時(shí)，只須加入響應(yīng)式設(shè)計(jì)就可以兼容這些終端，就不必單獨(dú)制作移動(dòng)端頁面了。響應(yīng)式開發(fā)主要是為了解決移動(dòng)互聯(lián)網(wǎng)瀏覽的問題，通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽、閱讀體驗(yàn)。

在開發(fā)移動(dòng)端頁面過程中，當(dāng)調(diào)整瀏覽器窗口時(shí)，將會通過判斷瀏覽器窗口的寬度來改變樣式，頁面結(jié)構(gòu)會根據(jù)瀏覽器窗口的大小重新展示，以適應(yīng)不同的移動(dòng)終端設(shè)備。例如，打開三星電子商城網(wǎng)站，運(yùn)行結(jié)果如圖1所示。

圖1 初始頁面

接下來，使用鼠標(biāo)縮小瀏覽器的窗口寬度，會看到網(wǎng)頁的布局會隨之發(fā)生變化，效果如圖2所示。

圖2 頁面的響應(yīng)式效果

從圖2可以看出，當(dāng)調(diào)整了瀏覽器的窗口大小后，頁面結(jié)構(gòu)會發(fā)生相應(yīng)的變化。由此可見，響應(yīng)式設(shè)計(jì)給用戶帶來了友好的頁面體驗(yàn)，同一個(gè)頁面在不同的設(shè)備上可以實(shí)現(xiàn)不同的排版。


猜你喜歡：

JavaScript語言特點(diǎn)介紹

Css中如何清理浮動(dòng)?

Web前端設(shè)計(jì)師常用的軟件

web前端之色彩心理學(xué)