如何在不冲突的情况下同时处理宽度和高度？

Question

如果我的视口宽度小于 330 像素，我希望段落字体为 9 像素，无论其高度如何。

同时，我也希望如果我的视口高度小于 330px，段落字体将是 9px，不管它的宽度。

我尝试了不同的命令，不管有没有!important关键字，都达不到预期的效果。 总有一个宽度或高度规则相互冲突。

我可以在 CSS 中处理这种情况吗？

Here is my code：

p{
  font-size: 16px;
}

@media (max-width:600px){
    p{
        font-size: 14px;
    }
}

@media (max-width:440px){
    p{
        font-size: 12px;
    }
}

@media (max-width:330px){
    p{
        font-size: 9px;
    }
}


@media (max-height:600px){
    p{
        font-size: 14px;
    }
}

@media (max-height:440px){
    p{
        font-size: 12px;
    }
}

@media (max-height:330px){
    P{
        font-size: 9px;
    }
}

Answer 1

只需将逻辑用于@media 查询。你可以阅读更多关于他们的信息here。

您的问题解决方案将是下面的代码（因为逗号创建 OR 条件）

@media (max-width: 330px), (max-height: 330px) {
  p { font-size: 9px; }
}