做网站，别再用固定宽度了啊。现在人手一部手机，屏幕大小五花八门。你的网站在电脑上好看，到了手机上挤成一团，用户扭头就走。响应式就是解决这个的：同一套代码，自动适应各种屏幕。

第一步，加一行代码。在HTML的head里放这个：

``

没有它，手机浏览器会把页面缩得很小，字小得看不清。这行代码告诉浏览器：按设备实际宽度来显示。

第二步，别写死像素。宽度用百分比，字号用rem，图片设成max-width:100%。比如图片，写死宽度500px，手机上一屏放不下就溢出，横着滑，体验极差。加一句`max-width:100%; height:auto;`，图片就老实了。

第三步，用媒体查询。这是响应式的核心。简单说就是：屏幕宽到什么程度，用哪套样式。

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


.nav { display: none; }


.mobile-menu { display: block; }


}

768px是个常用分界点，平板及以下走这套。桌面端显示横向导航，手机端换成汉堡菜单。媒体查询别写太多，两三个断点足够。断点太多，维护起来是噩梦。

第四步，布局换思路。以前用float，现在用Flexbox或Grid。Flexbox做一维排列，导航栏、卡片列表都顺手。Grid做二维网格，整页布局更直观。举个例：三栏卡片，桌面并排，手机竖排。Flexbox里加`flex-wrap: wrap`，每个卡片设`flex: 1 1 300px`，屏幕不够宽自动换行。不用写媒体查询也能自适应。

第五步，字体也要管。手机上太大，一行放不下几个字，很难看。用`clamp()`一行搞定：

css
font-size: clamp(1.2rem, 4vw, 2rem);

意思是：最小1.2rem，最大2rem，中间按视口宽度4%缩放。字号自动跟着屏幕走。

还有，测试。别只在电脑上缩窗口。用浏览器开发者工具切到手机模式，看看真实效果。有条件就拿真手机试。重点看三样：有没有横向滚动条，字能不能看清，按钮手指点得准不准。按钮太小，手指点不中，用户就烦了。

几个常见坑。一是忘了viewport，白忙活。二是图片没设max-width，撑破布局。三是媒体查询顺序写反，后面的覆盖前面的，样式乱套。四是一上来就追求完美，调半天。先让能看，再抠细节。

响应式没那么玄乎。核心就一句话：别把尺寸写死，让自己适应。动手改一个现有页面，半小时就有感觉。