直接在@media里改padding值不会动，因为媒体查询是开关式切换，不触发插值；transition必须声明在基础选择器中，且需配合box-sizing: border-box和统一单位才能实现平滑过渡。
为什么直接在@media里改padding值不会动
浏览器对媒体查询的处理是“开关式”的：断点触发时，样式规则整体切换，不涉及插值计算。你在@media (min-width: 768px)里写padding: 1.25rem，它不会从0.75rem平滑过渡到1.25rem——只是瞬间替换。真正能过渡的，是那些有明确起止数值、且被声明在基础选择器里的属性。
必须把transition写在基础选择器里，不是@media里
过渡动画的触发依赖于属性值的“变化过程”，而这个过程只能由浏览器在同一个选择器的不同状态间计算。所以transition必须提前声明在未加断点的基础规则中：
.card {
padding: 0.75rem;
transition: padding 0.3s ease;
}
<p>@media (min-width: 768px) {
.card {
padding: 1.25rem;
}
}</p><p>@media (min-width: 1024px) {
.card {
padding: 1.5rem;
}
}</p>
-
transition写在.card基础规则里，不是写在@media块内部 - 所有断点只负责改
padding值，不重复声明transition - 起止值单位必须一致（都用
rem或都用px），否则 Safari 可能静默失效 - 避免用
em——它会随父级字体缩放，导致断点过渡时padding意外放大或缩小
CSS变量 + transition 是更可控的方案
用--padding变量解耦定义与使用，既能统一管理，又能规避单位继承干扰：
:root {
--padding: 0.75rem;
}
<p>.card {
padding: var(--padding);
transition: padding 0.3s ease;
}</p><p>@media (min-width: 768px) {
:root {
--padding: 1.25rem;
}
}</p>
- 变量重定义必须放在
:root下，确保作用域覆盖全局组件 - 组件内用
var(--padding)读取，不要在@media里直接写padding: 1.25rem - 如果要支持深色模式叠加响应式，顺序很重要：
@media先于.dark类定义，否则后者可能被前者覆盖 - 别在
calc(var(--padding) * 1.2)这种嵌套里用transition，Safari 15.4 之前不支持
box-sizing: border-box 是平滑过渡的前提
如果还用默认的content-box，padding增大时元素总宽 = width + 2 × padding，断点切换瞬间可能撑破容器、触发布局抖动，动画看起来就是“卡一下再跳”。必须提前锁定尺寸模型：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 这条重置必须在所有样式之前生效，否则局部
box-sizing冲突会导致过渡错位 - 尤其注意伪元素（如
::before）——它们也参与盒模型计算，漏掉会引发视觉跳跃 - transition本身不关心
box-sizing，但它决定了padding变化是否“只影响内部空间”，这是平滑感的底层保障
实际项目中最容易被忽略的，是transition声明的位置和box-sizing的全局一致性。很多人写了变量、写了媒体查询，但动画还是生硬——问题往往出在transition被塞进了@media块，或者box-sizing只加在某个组件上，没覆盖到动态插入的节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
