Question

如果我可以编写包含逻辑OR的CSS媒体查询，我的情况很容易解决。由于我不能，我正在寻找最有效的替代方案。

目标：1）创建一个简约但响应迅速的页面2）使用HTML＆amp;仅CSS 3）将所有CSS保留在该部分而不是外部文件中4）最小化重复代码

@media (orientation: landscape) {...}
@media (orientation: portrait) {...}

@media (width: *tiny screen*) {...}
@media (width: *small screen*) {...}
@media (width: *medium screen*) {...}
@media (width: *large screen*) {...}

到目前为止，上述方法运作良好，因为任何情况都应触发一组基于方向的规则和一组基于大小的规则。关键是我希望“小”屏幕使用肖像规则，即使它们是风景画。

@media (orientation: portrait) OR (width: *tiny*) {...}
@media (orientation: landscape) {...}
@media width: *small screen* {...}
@media width: *medium screen* {...}
@media width: *large screen* {...}

无法在一个查询中对这两个条件进行OR操作，我提出的任何解决方案都需要在“微小”样式下重复整个肖像规则集，或者使用我试图避免使用的外部样式表。

任何人都有更好的主意吗？

Answer 1

你可以在媒体查询中写OR。只是写就好像是一个css选择器并使用逗号“，”：）

@media (orientation: portrait) OR (width: *tiny*) {...}

不起作用，但

@media (orientation: portrait), (width: *tiny*) {...}

确实

编辑：请参阅CSS media queries: max-width OR max-height

在CSS媒体查询中实现逻辑OR的最有效方法

1 个答案: