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

Question

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

同时，我也希望如果我的视口高度小于330px，段落字体将是9px，无论其宽度如何。

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

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

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; }
}

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

How to handle both width and height without conflict?

css

media-queries

responsive-design