html - 使用媒体查询显示元素时元素的相同 id

Question

我有两个疑惑。

1. 我想通过使用 @media 查询为 div 显示不同屏幕尺寸的不同元素？我可以为所有元素命名相同的 ID 吗？

2. 我能否对两个元素使用相同的 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;
   }
}