`这种写法，手机上一准溢出。改成百分比或者`max-width`。图片加一句`max-width:100%`，它就不会撑破容器。

接着是meta标签。少这一行，手机浏览器会假装自己是电脑，把页面缩成蚂蚁大小：

html

这行是响应式的开关，忘了它，后面全白搭。

布局用Flexbox或者Grid。以前靠float排版，现在没必要。Flexbox一行代码就能让元素自动换行：

css
.container {


display: flex;


flex-wrap: wrap;


}

屏幕窄了，子元素自己往下掉，不用你操心。

媒体查询是核心工具。别一上来写七八个断点，先用两个：一个手机，一个桌面。比如：

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


.nav { flex-direction: column; }


}

意思很简单：屏幕小于768像素时，导航从横排变竖排。断点选在开始别扭的地方，不是选在设备型号上。

字体也要跟着变。桌面上18像素舒服，手机上可能偏大。用`clamp()`一步到位：

css
font-size: clamp(16px, 2.5vw, 20px);

最小值16，最大值20，中间随屏幕缩放。一行搞定。

导航栏最容易翻车。桌面横排没问题，手机上挤成一条线。做法：小屏幕藏起菜单，放一个汉堡按钮。别用图片做按钮，用CSS画三条线，轻量。

表格是硬骨头。宽表格在手机上横向滚动很难受。要么改成卡片式排列，要么加`overflow-x: auto`让它在自己容器里滚，别拖着整个页面跑。

测试别只缩浏览器窗口。Chrome开发者工具的设备模拟够用，但真机一定要试。有些问题模拟器看不出来，比如iOS的输入框聚焦会放大页面。加一句`font-size: 16px`到输入框上，能躲过这个坑。

图片加载也要照顾手机。桌面传2MB大图，手机用户流量和耐心都撑不住。用`srcset`给不同屏幕配不同尺寸的图，或者至少压缩一下。

还有说一个常被忽略的点：触摸目标。按钮别做太小。手指不是鼠标指针，44像素见方是底线。链接之间留点空隙，别让人点错。

响应式不是加几个媒体查询就完事。它是从结构到细节的一整套思路：优先，布局跟着走，而不是跟着某个固定尺寸走。做完之后，拿三台设备看一遍——一台旧手机、一台平板、一台大显示器。都顺眼，才算过关。

标签