做网站，先别急着写代码呗。打开你的手机，看看那些访问量大的网站——字够大，按钮好点，图片不挤成一团。这就是标准。你做的网站，用户拿手机点开，找不到东西，扭头就走。

响应式不复杂。核心就一句话：让页面根据屏幕宽度自动调整。电脑上三栏，手机上堆成一列。导航菜单塞进一个按钮里。图片别超过屏幕宽度。

开工第一步，加个标签。

html

没这行，手机浏览器会把页面缩成邮票大小。加上它，页面宽度就跟手机对齐了。

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

css
.container {


max-width: 1200px;


width: 100%;


margin: 0 auto;


}

屏幕宽，它撑到1200px；屏幕窄，它自动缩。

第三步，用媒体查询。这是响应式的主力。它说：屏幕小到某个尺寸，就换一套样式。

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


.sidebar { display: none; }


.nav { flex-direction: column; }


}

手机上侧栏藏起来，导航竖着排。就这么直接。

媒体查询别写太多。两三个断点够了。常见的是768px和1024px。写多了自己都记不住，改起来头疼。

图片处理也简单。全局给图片加一条：

css
img {


max-width: 100%;


height: auto;


}

图片不会撑破容器。它自己缩放。

字体大小也别忽大忽小。用 `rem` 或 `clamp()`。`clamp(1rem, 2.5vw, 1.5rem)` 意思是：最小1rem，最大1.5rem，中间跟着屏幕宽度走。一行搞定。

导航菜单是重灾区。手机上别硬塞横向列表。用汉堡按钮，点开显示纵向菜单。CSS和一点JS就能做。不想写JS，用 `