less变量结合media query如何实现不同设备上的样式变化？

less变量结合media query使用详解

在less中，使用变量结合media query来实现不同设备上的样式变化，可以提供更简洁、高效的开发体验。但开发者可能遇到一些具体实现的疑问。

问题提出：如何实现组件在不同屏幕尺寸上具有不同padding？

解答：

less中的变量是编译时变量，在编译后将变为固定的css值，无法在运行时与media query进行交互。

要实现组件在不同屏幕尺寸上的不同padding，可以使用以下方法：

使用其他less变量：为不同屏幕尺寸的padding设置不同的less变量，并在media query中调用不同的变量。例如：

@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变量可以动态变化，与less变量结合使用可以实现更灵活的样式控制。例如：

.section {
  --padding: 20px;
}
.section1 {
  --padding: 20px;
}

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

请注意，如果需要在同一组件内设置多个不同的padding属性，则需为每个属性分别设置less变量。