做网站先想清楚一件事：用户用什么设备看。手机、平板、笔记本、台式机，屏幕宽度从三百多像素到三千多像素都有。以前固定宽度那一套行不通了，页面在手机上要么字小得看不清，要么横向滚动条拉来拉去。响应式就是来解决这个问题的。

第一步，加viewport

在head里写一行：

html

没有这行，手机浏览器会假装自己是九百多像素宽的桌面，页面被缩小，字糊成一片。这行告诉浏览器：宽度按设备实际来。就这么简单，别忘了。

第二步，布局别写死

别急着定死宽度。用百分比、用flex、用grid。一个两栏布局，桌面左右并排，手机上下堆叠。flex写起来顺手：

css
.container { display: flex; flex-wrap: wrap; }


.sidebar { flex: 1 1 280px; }


.main { flex: 2 1 500px; }

flex-basis给了个基准尺寸，空间不够自动换行。不用写一堆媒体查询就能应付大部分场景。

第三步，媒体查询做微调

断点不要照抄别人的，看自己的在哪儿“崩”。把浏览器拉窄，什么时候文字挤成一团了，什么时候导航放不下了，那里就是断点。常见的是768px、1024px，但不是规矩。

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


.nav { display: none; }


.menu-btn { display: block; }


}

窄屏把横向导航藏起来，换个汉堡按钮。逻辑清楚就行，别搞太复杂的断点表，维护起来头疼。

第四步，图片要听话

css
img { max-width: 100%; height: auto; }

两行搞定。图片不会撑破容器，高度按比例缩。大图还可以用srcset给不同屏幕配不同尺寸的文件，手机不用下载桌面大图，省流量也快。

几个容易踩的坑

字体别用固定的px，正文16px起步，小屏适当放大。按钮和链接点击区域至少44px，手指没那么精准。表格在手机上很难受，要么横向滚动，要么改成卡片式。测试的时候真机跑一遍，模拟器不靠谱。

响应式不是一次做完就完事。加了新，回头看看窄屏下还正常不。养成习惯，边写边缩浏览器窗口，问题早发现早改。