使用变量结合媒体查询时调节组件内边距不起作用的原因和解决方法是什么？

less 中使用变量结合 media query

在 less 中，可以使用变量来实现代码的可重用性。结合 media query，我们可以在不同屏幕尺寸下动态调整样式。

问题：

希望在小屏幕上将某个组件的内边距减小。使用如下代码时，发现不起作用：

@padding: 20px;

@media screen and(max-width: 1900px) {
  @padding: 16px;
}

.section{
  padding: @padding;
}
.section1{
 padding: @padding;
}

答案：

less 中的变量是编译时变量，不能交互运行时值。编译后，变量的值就固定为特定的 css 值。因此，上面的代码不起作用。

有几种方法可以解决这个问题：

方法 1：使用多个变量

我们可以使用多个变量来表示不同屏幕尺寸下的 padding 值：

@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;
  }
}

方法 2：使用 css 变量

也可以考虑使用 css 变量，它可以在运行时动态修改值：

:root {
  --padding: 20px;
}

.section{
  padding: var(--padding);
}
.section1{
 padding: var(--padding);
}

@media screen and(max-width: 1900px) {
  :root {
    --padding: 16px;
  }
}

以上就是使用变量结合媒体查询时调节组件内边距不起作用的原因和解决方法是什么？的详细内容，更多请关注其它相关文章！