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

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《使用变量结合媒体查询时调节组件内边距不起作用的原因和解决方法是什么？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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

终于介绍完啦！小伙伴们，这篇关于《使用变量结合媒体查询时调节组件内边距不起作用的原因和解决方法是什么？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！