使用 less 变量结合媒体查询调整元素内边距
在 less 中，变量是编译时变量，无法与运行时变量交互。因此，直接使用变量结合媒体查询的方式无法实现动态调整元素内边距。
要实现这一目的，可以使用以下解决方案：
-
定义多个 less 变量，分别对应不同屏幕大小下的内边距值：
@padding: 20px; @padding-sm: 16px;
-
在需要调整内边距的元素中使用 less 变量：
.section { padding: @padding; } .section1 { padding: @padding; } -
使用媒体查询根据屏幕大小调整对应元素的 less 变量值：
@media screen and (max-width: 1900px) { .section { padding: @padding-sm; } .section1 { padding: @padding-sm; } }编译后，less 会根据媒体查询条件动态生成 css 样式：
.section { padding: 20px; } .section1 { padding: 20px; } @media screen and (max-width: 1900px) { .section { padding: 16px; } .section1 { padding: 16px; } }
此外，还可以选择使用 css 变量来替代 less 变量，以实现更灵活的动态调整：
:root {
--padding: 20px;
--padding-sm: 16px;
}
.section {
padding: var(--padding);
}
.section1 {
padding: var(--padding);
}
@media screen and (max-width: 1900px) {
:root {
--padding: var(--padding-sm);
}
} 
