做网站，先别急着写代码。打开手机，看看你常逛的网站。再打开电脑，看同一个网站。差别大不大？如果手机上看要不停放大缩小，那这网站就不合格。

响应式网站，说白了就是一个网站能自己适应屏幕。手机、平板、电脑，打开都舒服。不用做两套，维护也省事。

怎么做？记住几个关键点。

第一，加一行代码。在网页头部放这个：

html

这行代码告诉浏览器：按设备实际宽度来显示。不加这行，手机浏览器会假装自己是电脑屏幕，把网页缩小显示，字小得看不清。

第二，宽度用百分比，别写死像素。比如容器宽度写 `width: 90%`，不写 `width: 960px`。写死像素，小屏幕上就溢出了。图片也一样，加一句 `max-width: 100%`，图片就不会撑破屏幕。

第三，用媒体查询。这是响应式的核心。简单说就是：屏幕宽度不同，用不同的样式。

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


.nav { display: none; }


.mobile-menu { display: block; }


}

意思是：屏幕宽度小于768像素时，隐藏桌面导航，显示手机菜单。768像素大概就是平板竖屏的宽度。你可以设多个断点，比如480、768、1024，分别对应手机、平板、小笔记本。

第四，布局用flexbox或grid。以前用float，麻烦。现在flexbox几行搞定。比如一行三列，小屏幕自动变一列：

css
.container { display: flex; flex-wrap: wrap; }


.item { flex: 1 1 300px; }

`flex: 1 1 300px` 意思是：每个项目最少300像素宽，能伸能缩。屏幕够宽就并排，不够就换行。不用写媒体查询也能自适应。

第五，字体大小别用固定像素。用 `rem` 或 `vw`。`1rem` 默认16像素，用户能在浏览器里调。`font-size: 1.2rem` 比 `font-size: 19px` 友好。可以用 `clamp()`：

css
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

意思是：最小1.5rem，最大2.5rem，中间按屏幕宽度4%来算。一行代码搞定流体字体。

第六，测试。写完别只看自己电脑。浏览器开发者工具里有设备模拟，选iPhone、iPad挨个看。但最好拿真手机试。手指点按钮够不够大？文字会不会挤在一起？导航能不能用？这些模拟器看不出来。

最后呢说个常见坑：忘了横屏。手机横过来，高度变小，有些布局会乱。测试时转一下屏幕看看。

响应式不复杂。核心就一句话：别假设用户屏幕多大。用相对单位，加断点，多测试。做完这几点，你的网站手机电脑都能看。