先说结论：响应式网站，就是一套代码，手机、平板、电脑打开都好看。不用单独做个手机版，省事。

第一步：加个viewport

打开你的HTML文件，在head里加一行：

html

不加这行，手机上网页会缩成一个小方块，字小得看不清。加了，浏览器就知道按屏幕实际宽度来排版。

第二步：别写死宽度

新手常犯的错：`width: 960px`。手机屏幕才375px宽，装不下，直接出横向滚动条。

改成百分比或`max-width`：

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


}

大屏不超过1200px，小屏自动缩，两边留白居中。

第三步：图片要听话

图片写死尺寸，小屏必溢出。给它加：

css
img {


max-width: 100%;


height: auto;


}

图片最大不超过父容器，高度按比例自动算，不变形。

第四步：用媒体查询改布局

这是响应式的核心。屏幕窄了，布局得变。比如桌面端一行三列，手机上一列一个：

css
.grid {


display: flex;


flex-wrap: wrap;


gap: 20px;


}


.grid-item {


flex: 1 1 30%;


}


@media (max-width: 768px) {


.grid-item {


flex: 1 1 100%;


}


}

768px是常见断点，手机竖屏基本都在这以下。断点不用设太多，两三个够用。设多了维护起来累。

第五步：字别太大，按钮别太小

手机上看，正文16px起步，别整12px，费眼。按钮和链接的点击区域至少44×44像素，手指点得准。

css
body {


font-size: 16px;


line-height: 1.6;


}


button {


min-height: 44px;


padding: 10px 20px;


}

第六步：测试

写完别只在电脑上拖窗口。用浏览器开发者工具切到手机模式看，或者直接拿手机打开。重点看三样：有没有横向滚动条、文字挤不挤、按钮好不好点。

几个坑提醒一下

别用`position: fixed`做导航栏，手机上键盘弹出来容易出问题。表格在小屏上要么加横向滚动，要么改成卡片式。视频用`width: 100%`，别写死。

响应式不难，核心就一句话：别把尺寸写死。用相对单位，用媒体查询兜底。写完多拿几台设备看看，比啥教程都管用。