Question

我在页面上有很多链接作为列表的一部分。

我想根据媒体查询为每个链接设置不同的背景位置。

我到目前为止

a.firstLink
{
 @media (min-width: 768px) and (max-width: 979px)
 {
   background-position:0px 0px;
 }
}
a.secondLink
{
 @media (min-width: 768px) and (max-width: 979px)
 {
   background-position:0px -100px;
 }
}

这很好，并且有效，但这意味着我必须做与链接一样多的媒体查询，并且有很多。将此乘以我想要为每个链接执行的媒体查询量（3），它将变成一些丑陋的CSS。

Answer 1

这个解决方案怎么样？

   @media (min-width: 768px) and (max-width: 979px) {

    a.firstLink {
       background-position:0px 0px;
     }

    a.secondLink {
       background-position:0px -100px;
     }

    }

它运作正常吗？

第二个解决方案：

   @media (min-width: 320px) and (max-width: 599px),
   (min-width: 600px) and (max-width: 767px),
   (min-width: 768px) and (max-width: 979px) {

    a.firstLink {
       background-position:0px 0px;
     }

    a.secondLink {
       background-position:0px -100px;
     }

    }

这样好吗？

根据媒体查询设置每个链接（很多）的样式

1 个答案: