pc端响应式必须用移动优先+媒体查询+grid/flex，且viewport meta标签必不可少；grid-template-columns需用auto-fit与minmax合理搭配；断点推荐768px/1024px/1440px三档；图片字体等细节需同步适配。
直接说结论：PC端做响应式，别用“自适应”这个词糊弄自己——真要一码多端，必须用移动优先 + 媒体查询 + Grid/Flex 弹性布局，且viewport和meta标签一个都不能少。
为什么viewport不写就等于白干
很多页面在手机上缩成一团、文字小得看不见，第一锅就是没加这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。它不是可选配置，是现代响应式的硬性门槛。没有它，浏览器会按桌面模式（通常是 980px 宽）渲染，再缩放给你看——所有@media断点都失效，rem计算错乱，vw单位失准。
- 只在 HTML
里写一次，别漏掉 - 别写
user-scalable=no——这是反无障碍设计，也违反 WCAG - 如果用了
initial-scale=1.0但页面仍被缩放，检查有没有其他 JS 动态改了viewport内容
grid-template-columns: repeat(auto-fit, minmax())怎么写才不翻车
这是目前最省心的多列自适应方案，但参数稍调错，就会出现“明明有空间却不加列”或“最后一列塌陷”等问题。
- 写法必须是：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));，auto-fit不能换成auto-fill（后者会留空列，导致换行异常） -
280px是移动端单列的合理下限；平板可设为360px，桌面420px，根据卡片内容密度微调 - 必须配
gap: 16px，别用margin模拟间距——否则最后一行卡片可能因 margin 合并或父容器 overflow 被截断 - IE11 不识别该语法，如需兼容，得用
@supports (display: grid)包裹，降级为flex-wrap方案
媒体查询断点不是越多越好，3个够用
别一上来就写@media (max-width: 320px)、@media (max-width: 375px)……这种“像素级适配”既难维护，又无实际意义。主流设备宽度其实高度聚类。
- 推荐三档断点：
768px（平板竖屏）、1024px（小桌面）、1440px（大屏），覆盖 95% 场景 - 写法统一用
@media (min-width: 768px)（移动优先），而不是max-width——避免样式层叠混乱 - 断点值别硬编码在 CSS 里，提取为 CSS 自定义属性，例如
--breakpoint-tablet: 768px;，方便全局调整 - 别在断点里重写整个布局逻辑，只改关键尺寸、间距、列数等变量
图片和字体的“自适应”最容易被忽略
布局再弹性，图片拉伸、字体忽大忽小、点击区域过小，照样毁体验。这些不是“写了 Grid 就自动好”的部分。
-
<img>必须加max-width: 100%; height: auto;，否则撑破容器；若需固定宽高比，用aspect-ratio: 4/3（Chrome 103+ / Firefox 98+），老浏览器 fallback 用伪元素撑开 - 响应式图片记得组合用
srcset和sizes，比如sizes="(max-width: 768px) 100vw, 50vw"，否则高 DPR 屏默认加载最大图，首屏慢一倍 - 字体别全用
px，主文本用rem（根字体随html动态调），标题可用clamp(1.5rem, 4vw, 2.5rem)实现流体缩放 - 按钮、链接的点击区域至少
44px × 44px，移动端padding别吝啬
真正难的不是写出能变的布局，而是让每一处“变”都有依据：图片为什么缩、字体为什么跳、断点为什么卡在 768px——这些细节堆起来，才是用户感知到的“自适应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
