响应式网站，说白了就是同一个网页，在电脑上、手机上、平板上都能正常看，不用你单独做个手机版罢了。现在手机流量占了大头，这事绕但是去。

第一步，加个meta标签。在HTML的head里写一行：``。不加这行，手机浏览器会假装自己是电脑屏幕，把页面缩成一小团。加了之后，页面宽度就跟着设备走。

第二步，别写死宽度。很多人习惯`width: 960px`，这在手机上直接溢出。换成百分比或者`max-width`。比如容器写`width: 90%; max-width: 1200px; margin: 0 auto;`，大屏不撑爆，小屏不挤扁。

第三步，图片要听话。给图片加`max-width: 100%; height: auto;`。这样图片最大不超过容器，高度自动算，不会变形。别给图片设固定像素宽高，一换屏幕就出事。

第四步，用媒体查询做断点。这是响应式的核心。基本写法：

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


.nav { display: none; }


.content { width: 100%; }


}

意思是屏幕窄于768像素时，导航藏起来，占满宽。断点不用多，两三个够用：手机一个，平板一个，桌面默认。别照着设备型号设断点，按什么时候挤坏了来定。

第五步，布局用flex或者grid。以前用float，清浮动清到头疼。现在导航栏写`display: flex; flex-wrap: wrap;`，窄屏自动换行。卡片列表用grid，`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`，一行能放几张放几张，不用写一堆媒体查询。

第六步，字体别用固定大小。正文用`font-size: 1rem`，用`clamp(1.5rem, 4vw, 2.5rem)`，屏幕小字就小，屏幕大字就大，中间平滑过渡。

第七步，手机上别让人左右滑。检查有没有元素超出屏幕。常见祸首是固定宽度的表格、没加`max-width`的图片、还有负margin。用浏览器开发者工具切到手机模式，左右拖一下，看哪块冒出去了。

第八步，触屏操作要留余地。按钮别太小，至少44×44像素。链接之间留点空隙，手指粗，点错很烦。鼠标悬停的效果在手机上没用，重要信息别只靠hover显示。

最后，真机测试。开发者工具模拟得再像，也不如拿自己手机打开看一眼。转一下屏幕，横屏竖屏都试试。缩放到最大，看文字会不会重叠。

响应式不是一次做完就完事。变了、加了新模块，就得回头看看小屏幕上还正不正常。养成习惯，改完页面顺手缩一下窗口，问题早发现早修。