Question

我有两个疑问。

我想使用div查询显示@media的不同屏幕大小的不同元素？我可以为所有元素命名相同的ID吗？
我是否可以对两个元素使用相同的id，如果使用@media查询隐藏一个元素显示另一个元素？

注意： 我知道ID是唯一的，但我想根据屏幕尺寸使用。

media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

}

请建议我。

Answer 1

你应该在这里使用一个类而不是一个id。 Id是独一无二的。您可以根据需要将类添加到任意数量的元素中。

媒体查询不是多次使用相同ID的借口。

如何用类实现它的愚蠢示例：

.some-class{
   background-color:blue;
}

media only screen and (min-width: 480px) {
   .some-class{
      background-color:red;
   }
}

@media only screen and (min-width: 768px) {
   .some-class{
      background-color:green;
   }
}

使用媒体查询显示元素时，元素的ID相同

1 个答案: