先看一个事实：超过一半的访客用手机打开你的网站。如果页面在手机上挤成一团、字小得看不清、按钮点不到，人立马就走。响应式网站就是解决这个问题的——同一套代码，电脑上宽屏排版，手机上自动收窄，平板也好用。

下面从零开始，一步步来。

第一步：加viewport标签

打开HTML文件，在head里放这一行：

``

没有它，手机会假装自己是电脑屏幕，把整个页面缩小显示。加了它，页面宽度才等于手机屏幕宽度。这是地基，别忘。

第二步：别写死宽度

新手常犯的错：`width: 1200px`。手机屏幕才375像素宽，直接溢出。改成百分比或max-width。

比如容器：

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


padding: 0 16px;


}

意思是：撑满屏幕，但最多1200像素，两边留点空隙。

图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就永远不超出容器。

第三步：用媒体查询断点

这是响应式的核心。CSS里写：

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


/ 手机上的样式写这里 /


}

逻辑很简单：屏幕宽度小于768像素时，执行括号里的样式。常见的断点就两三个：768px（手机）、1024px（平板）。不用搞七八个，够用就行。

第四步：布局从多列变单列

桌面端三列卡片，手机上排三列字会小得没法看。做法：

css
.cards {


display: flex;


gap: 16px;


}


@media (max-width: 768px) {


.cards {


flex-direction: column;


}


}

桌面横排，手机竖排。一行代码搞定。

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

手机上看正文，16px是底线，再小费眼。按钮的点击区域至少44×44像素，手指才点得准。这些也放进媒体查询里调。

第六步：在真机上试

浏览器按F12能模拟手机，但模拟归模拟。拿自己的手机打开看一遍，横屏竖屏都转转。手指能不能点中按钮，文字会不会被截断，一眼就看出来。

一个容易忽略的点

加``之后，别忘了检查长单词或长链接会不会撑破布局。给容器加`overflow-wrap: break-word`，省心。

响应式没那么玄乎。记住三件事：宽度用百分比、媒体查询改布局、真机测试。做完这三步，你的网站在手机和电脑上就都能看了。剩下的，是细节打磨。先跑起来，再慢慢调。