Question

我有这样的CSS：

.class1 {
  display: block;
  color: red;
}

.class2 {
  display: block;
  color: blue
}

@media(max-width:800px) {
  .class1-mobile {
    display: block;
    color: red;
  }
  .class2-mobile {
    display: block;
    color: blue
  }
}

@media(min-width:800px) {
  .class1-desktop {
    display: block;
    color: red;
  }
  .class2-desktop {
    display: block;
    color: blue
  }
}

所有属性及其值都相同，唯一的区别在于类名和媒体查询。所以我想知道是否有办法不复制它们。

Answer 1

这是使用非移动优先方法（.class { display: block; /* optional because div is already block element*/ } .class1 { color: blue } .class2 { color: red } @media(max-width:800px) { .class1 { color: red; } .class2 { color: blue } }）进行媒体查询的简化方法

<div class="class class1">red</div>
<div class="class class2">blue</div>

val currentDay = Date()
    val day = currentDay.time
    Logger.i("currentDay = $currentDay and day : $day ")

    val c = Calendar.getInstance()
    c.timeInMillis = day
    val d = c.time
    val sdf = SimpleDateFormat("dd/MM/yyyy HH:mm")

    Logger.i("meDate : ${sdf.format(d)}")

Answer 2

使用一个班级。

您可以在多个元素上使用相同的类，并且您可以使用多个元素同一元素上的类。

在不同的@media中使用不同类的相同值而不重复

2 个答案: