做网站先想清楚一件事：用户用什么设备看？答案是什么都有。手机、平板、笔记本、台式机，屏幕从四英寸到三十英寸。响应式就是让同一套页面自动适配这些尺寸。

第一步，加meta标签。在head里写：

没这行，手机浏览器会把页面缩成缩略图，字小得没法看。这是所有工作的前提。

第二步，别用固定像素。宽度写成百分比或vw，字号用rem。容器用max-width加margin auto，比如max-width: 1200px，小屏自然撑满，大屏不会拉得太长。图片设max-width: 100%，height: auto，免得撑破布局。

第三步，媒体查询。这是响应式的核心工具。常用断点三个就够：600px左右管手机，900px左右管平板，1200px以上管桌面。写法简单：

@media (max-width: 600px) { .nav { flex-direction: column; } }

意思是一到小屏，导航就从横排变竖排。

第四步，布局用Flexbox和Grid。Flexbox适合一行内的排列，导航、按钮组用它省事。Grid适合整页分栏，比如桌面三栏、手机一栏，改一下grid-template-columns就行。别再用float排版，坑太多。

第五步，导航要单独处理。手机上横向菜单挤不下，常见做法是收进一个汉堡按钮，点开显示纵向列表。代码不复杂，一个按钮加几行CSS切换display就行。

第六步，测。浏览器开发者工具里有个设备模拟，切到iPhone、iPad尺寸逐个看。重点查三处：文字有没有溢出、按钮够不够大（手指点得到，至少44px高）、图片有没有变形。真机也测一下，模拟器不完全准。

最后说几个常见毛病。一是断点设太多，五六个媒体查询互相打架，维护起来头疼，三个够用。二是只改宽度不管，桌面上的大表格到手机上照样溢出，这种情况得考虑横向滚动或换卡片式展示。三是忘了触屏，hover效果在手机上没用，交互要靠点击状态。

响应式不是加几个媒体查询就完事，是从写第一行CSS起就想着小屏。养成习惯，后面省事。