先写手机版，再扩到电脑罢了。别反过来。

很多人做网站习惯先画电脑版大图，最后才缩手机。结果手机上一堆东西挤不下，改到崩溃。换个顺序：打开编辑器，把窗口拉窄，先按手机屏幕排。多大、按钮多宽、图片占几行，全按小屏定。排顺了再拉宽，补电脑上的留白和分栏。这样最省事。

布局别写死宽度。用百分比，或者用 flex、grid。容器写 `max-width: 1200px`，两边留点余量，屏幕小了自动收。图片加一行 `max-width: 100%; height: auto;`，它就不会撑破手机屏。

字体和按钮，手机上要够大。正文至少 16px，按钮高度 44px 以上，手指点得准。别用 hover 做关键操作，手机没有鼠标。链接和按钮之间留空隙，别挨太近。

断点不用设太多。三档够用：手机、平板、桌面。比如 768px 和 1024px。每个断点只改真正需要改的东西，剩下的让布局自己流。断点越多，维护越累。

导航在手机上换成汉堡菜单。点开是个竖排列表，每项高度够点。别在手机上硬塞一排横菜单，字小得看不清。

表格在窄屏会溢出。要么让它横向滚动，要么在手机上改成卡片式，一行一条。长英文单词和链接会撑破容器，给它们加 `overflow-wrap: break-word`。

测试别只靠拖浏览器窗口。用真手机打开看，安卓和苹果各试一台。重点看三处：文字有没有被截断，按钮好不好点，图片有没有变形。再试试横屏。

最后记住一件事：响应式不是做一套完美适配所有屏幕的页面，是让在任何屏幕上都能读、能点、不出错。做到这三点，就够用了。