全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

什么是自適應(yīng)式頁(yè)面?

更新時(shí)間:2020-09-10 來(lái)源:黑馬程序員 瀏覽量:

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

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

1599728744869_響應(yīng)式01.jpg

圖1 初始頁(yè)面


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

1599728754310_響應(yīng)式02.jpg

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

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


猜你喜歡:

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

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

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

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

分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!