做网站，先别急着写代码。问问自己：用户拿手机多还是电脑多？答案多半是手机。所以，从第一行代码开始，就按手机屏幕来想。

第一步：加一行标签

在HTML头部加上这句：``。没它，手机浏览器会把网页缩成一张小图，字小得看不清。加了它，页面宽度就跟手机屏幕一样宽。

第二步：别写死宽度

新手常犯的错：`.box { width: 960px; }`。手机屏幕才375像素宽，960的盒子直接溢出，用户得左右滑。改成`width: 100%`或者`max-width: 960px`。图片也一样，加`max-width: 100%; height: auto;`，图片就会随容器缩，不会撑破版面。

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

媒体查询就是“屏幕小于多少时，换一套样式”。比如：

css
.container { display: flex; gap: 20px; }


@media (max-width: 768px) {


.container { flex-direction: column; }


}

电脑上三栏并排，手机上竖着排。768像素是个常用分界点，平板和手机基本都在这以下。分界点不用多，两三个够用。

第四步：字要够大，按钮要好点

手机上正文至少16像素，行高1.5以上。按钮高度别低于44像素，这是手指能舒服点到的尺寸。链接之间留点空隙，别让用户点错。

第五步：真机上看

浏览器按F12，切成手机模式，只是第一步。拿你自己的手机，打开页面，拇指划一遍。看看字挤不挤，按钮点不点得中，图有没有变形。电脑上看着好好的，手机上可能一塌糊涂。

第六步：别加载用不上的东西

手机流量和速度都有限。大图压缩，能用SVG就用SVG。桌面端才显示的装饰图，用媒体查询藏掉或者干脆不加载。字体文件别塞太多字重。

最后呢一条：先做手机版

很多人习惯先画电脑版，再往下缩。反过来更省事：先按手机屏幕把排顺，再往宽了加。手机版逼你想清楚什么最重要，因为屏幕就那么大，放不下废话。

响应式不是加个插件就完事。它是一套习惯：宽度用百分比，布局用弹性盒子，断点设在需要的地方，每改一次都拿手机看一眼。做到这些，网站基本不会在用户手里散架。