less变量与媒体查询的灵活使用
在使用less变量时，若想根据屏幕尺寸动态调整某个css属性，单纯使用@media进行条件判断会失效。这是因为less变量是编译时变量，在编译后会转化为固定的css值。
解决方法之一是创建不同的变量，分别对应不同的屏幕尺寸。例如：
@padding: 20px;
@padding-sm: 16px;
.section {
padding: @padding;
}
.section1 {
padding: @padding;
}
@media screen and (max-width: 1900px) {
.section {
padding: @padding-sm;
}
.section1 {
padding: @padding-sm;
}
}这种方法适用于需要根据不同条件使用不同值的场景。
另一种方法是使用css变量。css变量可以在运行时动态修改，因此可以与媒体查询配合使用。例如：
:root {
--padding: 20px;
}
@media screen and (max-width: 1900px) {
:root {
--padding: 16px;
}
}
.section {
padding: var(--padding);
}
.section1 {
padding: var(--padding);
}使用css变量的好处是更加灵活，可以动态调整变量的值而不必修改css代码。需要注意的是，对于不支持css变量的浏览器，需要使用polyfill进行兼容处理。
