先看一个数字：超过一半的网站流量来自手机。你的网站如果在手机上排版错乱、字小得看不清、按钮点不到，等于把一半访客往外赶。

响应式网站说白了就一件事：同一套代码，屏幕大就多显示点，屏幕小就挤一挤、换行、藏起次要。不用给手机单独做个站。

第一步，加一行 meta 标签

在 `` 里放这句：

html

没这行，手机浏览器会假装自己是电脑，把整页缩小显示，字就成蚂蚁了。这是最常见的翻车点，先检查有没有。

第二步，别写死宽度

新手爱写 `width: 1000px`。屏幕只有 375px 宽，直接横向溢出。改用百分比和 `max-width`：

css
.container {


width: 90%;


max-width: 1100px;


margin: 0 auto;


}

图片也一样，加一句 `img { max-width: 100%; height: auto; }`，图片就不会撑破容器。

第三步，用媒体查询换布局

这是响应式的核心工具。逻辑很简单：屏幕窄到一定程度，就换一套样式。

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


.nav { display: none; }


.card { width: 100%; }


}

写着写着会发现，超过两个断点就乱了。现在更省事的做法是 CSS Grid 的 `auto-fit`，让浏览器自己算列数：

css
.cards {


display: grid;


grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));


gap: 16px;


}

每张卡片最少 260px，放不下就自动换行。一行代码顶好几个媒体查询。

第四步，照顾手指

手机上没有鼠标悬停。按钮和链接的点击区域至少 44×44 像素，间距别太挤。导航在小屏上收进汉堡菜单，别硬塞五个菜单项。

第五步，真机上看

浏览器开发者工具能模拟手机尺寸，但不够。真拿手机打开看：字能不能看清，横屏竖屏切换有没有错位，表单能不能点进去。这一步省不了。

调完再看加载速度。响应式常配一套大图，手机流量加载慢一样糟糕。用 `srcset` 给不同屏幕提供不同尺寸的图片，小屏不下载大图。

整个流程就这些。先加 viewport，再拆掉写死的宽度，然后用 grid 或媒体查询排布，还有上手机验证。做完这四步，你的网站手机电脑都能看了。

Grid;移动端适配;viewport