html - 在很多元素中使用 !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 */
} 

等等……

编辑: 我从较小的视口(viewport)尺寸开始，以获得更好的移动拳头支持!