可以在许多元素中使用！important吗?如果不是如何解决这个问题

Question

我有

@media (max-width: 360px), 
@media (max-width: 320px),
@media (max-width: 768px),

等等...

为了我的网站的响应能力（分配）。我首先将css代码放在max-width:360px中，然后当我现在将代码放入max-width:320px时，它不会更改元素的大小/边距/填充等。它需要！important才能工作，这就是为什么我的代码中有很多！important，比如："margin-left:240px !important;"。而且我相信如果我开始为max-width:768px编码，尺寸将不起作用。有没有办法解决这个问题？帮助我是初学者。

这是示例代码：

@media (max-width: 320px) {
.txtyourrest
{
    font-size:20px ; /*will work*/
}
}
@media (max-width: 360px) {
.txtyourrest
{
    font-size:25px !important; /*will work*/
}
}
@media (max-width: 768px) {
.txtyourrest
{
    font-size:30px !important; /*wont work*/
}
}

Answer 1

尝试使用：

@media (max-width: 320px) {
  /* css rules */
}
@media (min-width:321px) and (max-width: 360px) {
  /* css rules */
}
@media (min-width:361px) and (max-width: 768px) {
  /* css rules */
} 

等等...

编辑：我从小视口大小开始，以获得更好的移动拳头支持！

Answer 2

更改顺序媒体查询

@media (max-width: 768px) {
    .txtyourrest
    {
        font-size:30px; /*wont work*/
        color:red;
    }
    }
    
    @media (max-width: 360px) {
    .txtyourrest
    {
        font-size:25px; /*will work*/
        color:blue;
    }
    }
    @media (max-width: 320px) {
    .txtyourrest
    {
        font-size:20px ; /*will work*/
        color:yellow;
    }
    }

<div class="txtyourrest">
for the responsiveness of my website(assignment) 
</div>

Answer 3

理想情况下，除非必须使用！important，否则您不想使用。相反，您应该以智能方式利用级联媒体查询，以便它们适当地相互"覆盖"。

如果您使用一系列"最大宽度"查询，并且目的是在变小时区分某些内容，请先从最大数字开始，然后向下。

如果您使用一系列"最小宽度"查询，并且目的是在变大时区分某些内容，请先从最小的数字开始，然后向下。

最后，您可以将它们组合在一起，以便仅针对那些"介于两者之间"的查询。有了这些，如果没有大小同时出现，顺序不一定重要。

例子：

p {
  color: blue;
}
@media (max-width: 500px) {
  /*Everything up to 500px*/
  #small {
    color: purple;
  }
}
@media (max-width: 400px) {
  /*Everything up to 400px*/
  #small {
    color: red;
  }
}
@media (min-width: 300px) {
  /*Everything bigger than 300px*/
  #big {
    color: red;
  }
}
@media (min-width: 400px) {
  /*Everything bigger than 400px*/
  #big {
    color: purple;
  }
}
@media (min-width: 500px) {
  /*Everything bigger than 500px*/
  #big {
    color: blue;
  }
}
@media (min-width: 400px) and (max-width: 499px) {
  /*Everything between 400px and 499px, including those*/
  #between {
    color: purple;
  }
}
@media (min-width: 300px) and (max-width: 399px) {
  /*Everything between 300px and 399px, including those*/
  #between {
    color: red;
  }
}

<p id="small">Get Smaller</p>
<p id="big">Get Bigger</p>
<p id="between">Only Change for Some</p>

要查看在此代码段中运行的媒体查询，请先单击"展开代码段"，以便仅打开代码段，然后您可以调整浏览器大小以进行查看。