先做手机版。打开你的设计稿，把宽度调到375像素。所有元素竖着排，别搞两栏三栏。图片撑满宽度，按钮至少44像素高，手指点得着。导航栏塞进汉堡菜单，点开再显示链接。这一步做完，网站在手机上就能正常用了。

接着加媒体查询。CSS里写`@media (min-width: 768px) { ... }`，把平板和电脑的样式塞进去。手机版是基础，大屏只是锦上添花。别反过来做——先做电脑版再缩到手机，你会被各种溢出和错位搞疯。

用百分比和`fr`单位，别写死像素。容器宽度写`max-width: 1200px; width: 100%`，两边留点padding。图片加`max-width: 100%; height: auto`，这一行能省你三天调试时间。

字体用`rem`。根字号设16px，写2rem、1.5rem。手机上看不嫌大，电脑上看不嫌小。

Flexbox管一维排列，Grid管二维布局。卡片列表用Grid：`grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))`。这一行代码，卡片会自动换行，手机一列，平板两列，电脑三列。不用写一堆媒体查询。

汉堡菜单用checkbox加label做，纯CSS能跑，不依赖JS。点一下切换类名，菜单滑出来。记得加`aria-label`，读屏软件能认。

测试别只拉浏览器窗口。打开开发者工具，切到设备模式，挨个选iPhone SE、iPad、桌面。重点看三处：导航栏会不会挤爆，图片会不会变形，长单词会不会撑破容器。长单词加`overflow-wrap: break-word`。

触控目标之间留8像素以上间距。手指比鼠标粗，按钮挨太近用户会点错。

表格在手机上很难看。要么横向滚动（外层包个`overflow-x: auto`的div），要么改成卡片式，每条记录竖着排。后者体验更好，但要多写点CSS。

视频用`

末了说，在真机上点一遍。模拟器再像，也不如拿手机滑两下。安卓和iPhone都试试，重点看字体渲染和点击响应。

响应式不是玄学。手机优先，弹性单位，媒体查询兜底，真机验收。四步走完，你的站就能在各种屏幕上好好站着。