先写手机样式，再写电脑样式啊。反过来会死人。

打开任何网站，超过一半流量来自手机。用户点进来，排版错位、字小得看不清、横向滚动条满天飞——三秒关掉。响应式就是让同一个页面自己变形状，手机一列，平板两列，电脑三列。

第一步，加头标签。

html

这行不加，手机上永远是缩小版电脑页面。加完，页面才认手机屏幕宽度。

第二步，别写死像素。

宽度、间距能用百分比就不用像素。图片写`max-width: 100%; height: auto;`，容器多宽它多宽，不溢出。字号用`rem`或`clamp()`，别用`px`。`font-size: clamp(16px, 2.5vw, 24px)` 意思是：最小16，最大24，中间跟着屏幕走。

第三步，媒体查询从大到小还是从小到大？

老手都从手机开始，往上写。手机默认样式先写，然后：

css
@media (min-width: 768px) { / 平板 / }


@media (min-width: 1024px) { / 电脑 / }

为什么？手机样式最简单，一列排下来就行。先写电脑三列，再回头拆成一列，往往一堆覆盖不掉的历史遗留。先手机，后加东西，干净。

第四步，布局用Flex或Grid，别用float。

css
.card-list { display: flex; flex-wrap: wrap; gap: 16px; }


.card { flex: 1 1 300px; }

`flex-wrap: wrap`让卡片装不下就换行。`flex: 1 1 300px`意思是：能长大、能缩小、基准300宽。一行放得下三个就三个，放不下自动变两个、一个。不用写媒体查询都能用。

第五步，导航菜单要换脸。

电脑上横排，手机上得变汉堡按钮。最简单做法：

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


.nav-links { display: none; }


.nav-links.open { display: flex; flex-direction: column; }


.hamburger { display: block; }


}

按钮点一下给菜单加`open`类，JS就三行。别搞动画花活，先跑通。

第六步，用真机测，别只缩浏览器窗口。

浏览器拉窄只是模拟。真机上字体渲染不同，点击区域小于44像素手指点不准。按钮、链接至少给44×44的点击区。Chrome开发者工具有设备模式，选个iPhone、安卓机看看，比瞎猜强。

最后呢，表格别硬扛。

数据表格在手机上横向滚动就行：

css
.table-wrap { overflow-x: auto; }

外面包一层，别让表格把整个页面撑破。

响应式不是高深技术。核心就一句：别假设屏幕多宽。用相对单位，用Flex/Grid，媒体查询从手机往上加。写完拿手机打开看看，手指点得着，字看得清，不左右晃。够了。