做网站，先想清楚一件事：用户拿什么看？手机、平板、笔记本、大屏显示器，尺寸差得远。响应式网站就是一套代码，自动适应所有屏幕。不用做三个版本，省事。

第一步，加viewport标签。写进head里：``。不加这行，手机浏览器会把页面当电脑版缩小，字小得看不清。这行代码告诉浏览器：按设备实际宽度来。

第二步，用相对单位。别写死`width: 960px`。换成百分比或`max-width`。比如容器用`width: 100%; max-width: 1200px; margin: 0 auto;`。屏幕小，容器跟着缩；屏幕大，最多1200，不会拉得难看。字体也别用px，用`rem`或`em`，根字号一改，全站跟着调。

第三步，媒体查询。这是响应式的核心。写法：

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


.sidebar { display: none; }


.nav { flex-direction: column; }


}

意思是屏幕宽度小于768像素时，侧栏藏起来，导航竖排。断点选多少？看。常见768、1024两个。别贪多，两三个够用。先做手机样式，再往上加，这叫移动优先，改起来简单。

第四步，图片要灵活。给img加`max-width: 100%; height: auto;`。图片不会撑破容器。大图用`srcset`给不同尺寸，手机加载小图，省流量。懒加载也加上：`loading="lazy"`，一个属性的事。

第五步，布局用Flexbox或Grid。以前float加clearfix，麻烦。现在Flexbox一行搞定水平排列，换行用`flex-wrap: wrap`。Grid做二维布局更直接。这两个工具天生适合响应式，学一下不亏。

第六步，导航别硬撑。电脑上横排，手机上换成汉堡菜单。用一点点JS切换class就行，不用引大库。菜单展开时注意别挡住，加个遮罩层或者直接推下去。

第七步，测试。浏览器开发者工具里有个设备模拟，选几个常见尺寸看。但别只信模拟，真机上手滑一遍。安卓和iOS渲染有细微差别，早发现早改。

最后说个坑：别用固定高度。`height: 500px`在手机上可能把截断。用`min-height`，让自己撑开。

响应式不难，核心就三样：viewport、相对单位、媒体查询。剩下是细节打磨。写完代码，拿自己手机打开看看，顺眼就差不多了。