做网站先想清楚一件事：用户拿什么看？手机、平板、电脑，屏幕大小差得远啊。网页得自己适应，这就是响应式。

第一步，加viewport。在HTML头部放这行：

html

没它手机上网页会缩成一小块，字小得看不清。

第二步，别写死宽度。`width: 960px`这种写法早点扔掉。改成百分比或`max-width`。图片加`max-width: 100%`，防止撑破屏幕。

第三步，媒体查询。这是响应式的核心。屏幕窄于768像素时，改布局。比如导航栏从横排变竖排，三列卡片变一列：

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


.nav { flex-direction: column; }


.card { width: 100%; }


}

断点不用太多，两三个够用。常见的是768和1024。

第四步，用Flexbox或Grid排布局。以前用float做网格，现在没必要。Flexbox一行代码就能让元素自动换行：`flex-wrap: wrap`。Grid更省事，`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`，卡片自动适应容器宽度，写一次管所有屏幕。

第五步，字体和间距也要跟着变。大屏用大字号，小屏小一点。可以用`clamp()`：`font-size: clamp(16px, 4vw, 24px)`。最低16，最高24，中间随屏幕走。

第六步，测试。浏览器开发者工具里有个设备模拟，点开挨个尺寸拖。别只信模拟，真机也看看。iPhone和安卓的显示有差别。

几个坑提前说。别用固定高度，会溢出。别把桌面版硬塞进手机，交互逻辑不一样。手机上没有hover，按钮得靠点击。表格在手机上难搞，要么横向滚动，要么改成卡片式。

响应式不是做完就完事。新加进来，布局可能又乱。每次改完，缩放窗口看一眼。

动手比看教程快。拿个简单页面练，从单列做起，慢慢加断点。两三个小时就能摸出门道。