做网站，最怕什么？电脑上看着挺好，手机一打开，字挤成一团，按钮点不着啊。用户三秒就关了。

响应式就是解决这个的。一套代码，屏幕大小自动适应。下面直接说怎么干。

第一步：先搞定视口

在HTML的head里加这行：

html

不加这行，手机浏览器会把页面缩成缩略图，字小得看不见。这行代码告诉浏览器：按设备实际宽度来。

第二步：别写死宽度

新手最爱写`width: 1200px`。千万别。用百分比或者`max-width`。

css
.container {


width: 90%;


max-width: 1200px;


margin: 0 auto;


}

意思是：平时占屏幕90%，但最宽不超过1200。大屏不撑爆，小屏不溢出。

第三步：图片要听话

css
img {


max-width: 100%;


height: auto;


}

图片最大不超过容器，高度自动算。一张大图在手机上不会横向撑破页面。

第四步：媒体查询，关键就一条

别搞七八个断点，累死自己。记住一个核心断点：768px。

css
/ 手机默认样式 /


.nav { display: none; }


/ 大屏才显示完整导航 /


@media (min-width: 768px) {


.nav { display: flex; }


}

先写手机样式，再用`min-width`往上加。这叫移动优先。反过来写也行，但改起来容易漏。移动优先更省事。

第五步：用Flexbox排布局

别用float了。Flexbox两行搞定等分布局：

css
.cards {


display: flex;


flex-wrap: wrap;


gap: 1rem;


}


.card {


flex: 1 1 300px;


}

每个卡片最小300px，放不下自动换行。手机上一列，电脑上三列，一行代码不用多写。

第六步：字体和按钮别太小

手机上正文至少16px。按钮点击区域至少44×44像素。手指头没那么细。

css
body { font-size: 16px; }


button { padding: 12px 24px; }

第七步：测试，别猜

Chrome按F12，点那个手机图标，选iPhone SE——最小的屏。看看横不横向滚动。有横向滚动条就是有元素超宽了，查`width`写死的那个。

真机也要试。模拟器不算数。

常见坑

表格宽了加`overflow-x: auto`包一层。长单词加`word-break: break-word`。视频用`width: 100%`。输入框加`box-sizing: border-box`，不然padding撑破容器。

响应式没那么玄乎。核心就一句话：别写死尺寸，让自己流。写的时候多想想小屏，别写完再补救。