less变量与媒体查询的灵活使用

在使用less变量时，若想根据屏幕尺寸动态调整某个css属性，单纯使用@media进行条件判断会失效。这是因为less变量是编译时变量，在编译后会转化为固定的css值。

解决方法之一是创建不同的变量，分别对应不同的屏幕尺寸。例如：

CSS婚礼策划服务机构宣传网站模板

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进行兼容处理。