做网站最烦什么？电脑上排得好好的，手机上打开就乱成一锅粥呗。以前的办法是电脑一套、手机一套，改个电话号码要动两个地方，累不累？响应式就是一套代码，屏幕大就铺开，屏幕小就收起来。

先说清楚原理。核心就一个：让页面知道“我现在多宽”。靠的是这行标签，放在``里：

html

没这行，手机浏览器会假装自己有980像素宽，然后把页面缩小塞进屏幕，字小得跟蚂蚁一样。有了它，页面宽度就等于屏幕宽度，一切好办。

第二步，别把宽度写死。`width: 960px`这种写法直接扔掉。换成百分比或者`max-width`。容器这样写：

css
.container {


width: 100%;


max-width: 1100px;


margin: 0 auto;


padding: 0 16px;


}

大屏最多1100，小屏自动缩，两边留点空，手指不顶着边。

第三步，图片别撑破。加一句`img { max-width: 100%; height: auto; }`。图片宽度永远不超过爹的宽度，高度自己算。一行代码，手机上的大图就不会横向溢出。

第四步，用媒体查询调布局。这是响应式的骨架。

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


.nav { display: none; }


.card { width: 100%; }


}

意思是：屏幕窄于768像素时，导航藏起来换汉堡菜单，卡片从一行三个变成一行一个。断点不用太多，手机上一般767、991两个就够，多了纯属给自己找事。

第五步，布局工具选对。早年用浮动，清浮动清到头秃。现在直接用Flexbox，横排竖排一句话的事。比如卡片列表：

css
.cards { display: flex; flex-wrap: wrap; gap: 16px; }


.card { flex: 1 1 300px; }

屏幕够宽就并排，不够就换行，每张卡最少300像素，浏览器自己算一行放几个。比手写媒体查询省心。

最后一点两个坑。一是字号别用`px`写死在根上，稍微用`rem`，用户在系统里调了字体大小，你的页面能跟上。二是别忘了点按区域，手机上的按钮最少44像素高，手指没那么细。

做完拿手机真机看一眼，别只在浏览器里缩窗口。缩窗口和真手机是两回事，触屏、滚动、键盘弹起都会搞事。

响应式不神秘。一个视口标签，一套弹性单位，两三个断点，加真机测试。就这些。别追求一步到位，先让在小屏上能读、能点，再打磨细节。