做网站先想清楚一件事：用户不一定用电脑打开你的页面。手机、平板、小笔记本，屏幕宽度从三百多像素到两千多像素都有。响应式网站就是让同一套代码自动适配这些尺寸，不用为每个设备单独做一版。

起步很简单。在HTML的head里加一行meta标签：

html

这行告诉浏览器：页面宽度跟着设备走，别自作主张缩放。不加这行，手机上看到的字会小得像蚂蚁。

接下来是布局。别急着写固定宽度，比如`width: 960px`，这种写法在手机上会直接溢出。改用百分比或者弹性布局。最简单的办法是CSS Grid：

css
.container {


display: grid;


grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));


gap: 20px;


}

这段代码的意思是：每列至少280像素宽，能塞几列塞几列，多余空间平均分。桌面上一行四列，手机上自动变成一列。不用写任何媒体查询。

媒体查询还是要会。有些地方Grid搞不定，比如导航栏在手机上要收起来。基本写法：

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


.nav { display: none; }


.menu-btn { display: block; }


}

断点别设太多。三个够用：手机（768以下）、平板（768到1024）、桌面（1024以上）。设多了自己都记不住哪个样式在哪生效。

图片是个坑。别直接扔一张3000像素宽的大图上去。用`max-width: 100%`让图片跟着容器缩，同时用`srcset`给不同屏幕准备不同尺寸：

html

浏览器自己挑合适的下载，省流量也快。

字体大小别用固定像素。用`rem`或者`clamp()`：

css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

意思是最小1.5rem，最大3rem，中间跟着屏幕宽度走。手机上不至于撑破，大屏上也不显得小气。

测试的时候别只拖浏览器窗口。打开开发者工具的设备模拟，挨个看iPhone SE、iPad、普通笔记本。重点检查三样：有没有横向滚动条、按钮手指能不能点准、文字会不会挤成一团。横向滚动条几乎都是某个元素写死了宽度，找出来改成`max-width: 100%`。

还有一条经验：先做手机版，再往大屏加东西。反着做容易在手机上删删减减，越改越乱。从小屏开始，样式是加法，逻辑清楚得多。

Grid;媒体查询;移动优先;自适应布局