【先看效果】

【PC端顯示】

【手機(jī)端顯示】

響應(yīng)式就是使用媒體查詢，在多個(gè)的屏幕尺寸下，讓網(wǎng)頁(yè)的布局不要亂。

核心就是，在對(duì)應(yīng)的屏幕下，通過(guò)對(duì)發(fā)生錯(cuò)亂的元素樣式進(jìn)行更改，讓其在該屏幕下排列整齊，在對(duì)應(yīng)的屏幕下，把版心改成當(dāng)前屏幕的合適大小，去掉元素的定高定寬，寬度改為100%，去除多余的內(nèi)外邊距，左右布局改成上下。

這個(gè)需要一個(gè)個(gè)div逐個(gè)去更改，看著費(fèi)勁，其實(shí)也花不了多少時(shí)間。

本文僅做網(wǎng)頁(yè)適配案例，學(xué)習(xí)使用媒體查詢，所以只有一個(gè)簡(jiǎn)單的頁(yè)面，且只寫(xiě)了布局。

我把項(xiàng)目放在了Gitee上：

https://gitee.com/xt-123/responsive-web-page