做网站，先别急着写代码。打开浏览器，把窗口拉窄，再拉宽。看看你手头的页面会不会崩。如果一窄就乱、一宽就空，那说明布局是死的。响应式就是让页面活起来，跟着屏幕变。

第一步，加一行 meta 标签。不加，手机上只会把网页缩成一张小图，字小得看不清。

html

这行的意思是：按设备宽度来渲染，初始缩放一倍。就这一行，手机端体验立马不一样。

第二步，别用固定宽度。`width: 960px` 这种写法要戒掉。换成百分比、`fr`、`rem`、`vw` 都行。简单说，让元素自己会算，而不是你替它算死。

布局用 Flexbox 或 Grid。Flex 适合一行排列的东西，导航、卡片列表。Grid 适合整页分区，头部、主区、侧栏、页脚。两者都不用浮动，代码少，毛病也少。

第三步，断点别拍脑袋。很多人一上来就写 768px、1024px，这不是不行，但更靠谱的做法是：拉窗口，看到哪里丑了，就在哪里打断点。撑不住了才加规则，不是照着别人的表抄。

媒体查询写起来很简单：

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


.nav { flex-direction: column; }


}

意思是屏幕窄于 600px 时，导航竖着排。就这样，够用。

第四步，图片要听话。给图片加一句 `max-width: 100%; height: auto;`，它就不会撑破容器。再进一步，用 `` 或 `srcset` 给不同屏幕送不同尺寸的图。手机不需要下 2000px 的大图，省流量也快。

第五步，字体别写死 px。用 `rem`，根字号设成 `16px`，后面 1rem 就是 16px。想整体放大缩小，改根字号就行。移动端正文别小于 16px，不然看着累。

第六步，触屏和鼠标不一样。按钮别太小，手指点不准。链接之间留点空隙。`hover` 效果在手机上没意义，别把关键信息藏在悬停里。

最后呢，真机测试。别只在浏览器里拉窗口。拿手机看，拿平板看。浏览器开发者工具能模拟，但真机的字体渲染、点击手感、横竖屏切换，模拟不出来。发现问题就改，别猜。

响应式不是一套固定模板，是一个习惯：写任何样式之前，先问一句——屏幕变了，它还行吗？养成这个习惯，页面就不会脆。