如何在 Less 中使用变量和 Media Query 动态调整样式值？

less变量结合media query的应用场景

在less中，通过变量结合media query，可以在不同屏幕尺寸下使用不同的样式值。以下是一个示例，其中我们定义一个名为@padding的变量，用于控制组件的内边距：

@padding: 20px;

为了在屏幕宽度小于1900px时缩小组件的内边距，我们需要在media query中重定义@padding变量：

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

然后，我们在组件中使用@padding变量设置内边距：

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

注意：less中的变量是编译时的变量，在编译后变为固定的css值。因此，上述代码中media query中对@padding变量的重定义不会实时生效，而是需要重新编译less文件。

替代方案：由于less变量的局限性，我们可以使用其他方式来实现上述效果，例如：

• 定义多个变量，如@padding-lg和@padding-sm，分别用于不同屏幕尺寸；
• 使用css变量，该变量会在运行时动态更新：

:root {
  --padding-lg: 20px;
  --padding-sm: 16px;
}

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

@media screen and(max-width: 1900px) {
  .section {
    padding: var(--padding-sm);
  }
}

以上就是如何在 Less 中使用变量和 Media Query 动态调整样式值？的详细内容，更多请关注其它相关文章！