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

Question

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

目标:1) 创建一个简约但响应迅速的页面 2) 仅使用 HTML 和 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* {...}

如果不能在一个查询中对这两个条件进行或运算，我想出的任何解决方案都需要在“微小”样式下重复整套纵向规则，或者使用我试图避免的外部样式表.

谁有更好的主意？

Answer 1

你可以在媒体查询中写 OR。只写 is 就好像它是一个 css-selector 并使用逗号“,” :)

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

不工作，但是

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

做

编辑:参见CSS media queries: max-width OR max-height