【先看效果】

【PC端顯示】

【手機端顯示】

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

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

這個需要一個個div逐個去更改，看著費勁，其實也花不了多少時間。

本文僅做網(wǎng)頁適配案例，學習使用媒體查詢，所以只有一個簡單的頁面，且只寫了布局。

我把項目放在了Gitee上：

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