【先看效果】

【PC端显示】

【手机端显示】

响应式就是使用媒体查询，在多个的屏幕尺寸下，让网页的布局不要乱。

核心就是，在对应的屏幕下，通过对发生错乱的元素样式进行更改，让其在该屏幕下排列整齐，在对应的屏幕下，把版心改成当前屏幕的合适大小，去掉元素的定高定宽，宽度改为100%，去除多余的内外边距，左右布局改成上下。

这个需要一个个div逐个去更改，看着费劲，其实也花不了多少时间。

本文仅做网页适配案例，学习使用媒体查询，所以只有一个简单的页面，且只写了布局。

我把项目放在了Gitee上：

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