做网站，先别急着写代码。打开你的手机，看看那些用起来舒服的站，再对比一下要不停放大缩小的站。差别在哪？就是今天要说的：响应式。

说白了，响应式就是让同一个网站，在大屏电脑、平板、手机上都能自动调整布局，看着不别扭，点着不费劲。

第一步：加一行代码

在HTML的head里加上这句：

html

这行代码告诉手机浏览器：别自作主张把页面缩小，按设备的实际宽度来。不加这行，后面全白搭。

第二步：别写死宽度

新手最爱犯的错：`width: 1200px`。在电脑上没问题，到手机上就撑破了。改成百分比或`max-width`：

css
.container {


width: 90%;


max-width: 1200px;


margin: 0 auto;


}

意思是：平时占屏幕九成宽，但最宽不超过1200像素，居中显示。

第三步：图片要听话

图片也得跟着变：

css
img {


max-width: 100%;


height: auto;


}

这样图片永远不会超出容器，高度自动缩放，不会变形。

第四步：用媒体查询换布局

这是响应式的核心。比如三栏布局，手机上改成一栏：

css
@media (max-width: 768px) {


.column {


width: 100%;


}


}

768像素是个常用分界点。屏幕比这窄，就换一套样式。你可以在不同断点写不同规则，手机、平板、电脑各管各的。

第五步：字体和按钮别太小

手机上正文至少16像素，按钮高度至少44像素。手指头没那么精细，太小了点不准。别在电脑上看着刚好就完事，拿真手机试。

第六步：测试

做完别光在电脑上缩窗口。用真手机打开看，横屏竖屏都试试。Chrome开发者工具里有设备模拟，但真机最靠谱。

几个坑

不要给所有元素设固定高度，一多就溢出。不要用`float`做布局了，用flexbox或grid，几行搞定还自适应。不要在媒体查询里重复写同样的样式，先写通用样式，再在断点里改差异部分。

响应式不复杂，核心就一句话：让布局跟着屏幕走，别跟屏幕较劲。上手做一遍，比看十篇教程管用。