@media 用“或”和 iPhone 查询怪异答案

【问题标题】：@media query weirdness with "or" and iPhone@media 用“或”和 iPhone 查询怪异
【发布时间】：2014-05-28 22:46:23
【问题描述】：

如果我使用这个查询（iPhone 视网膜）

     #clickme
    {
        font-size: 200%;
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 100px;
        background-color: red;
    }
   @media (min-device-width: 480px)
    {
        #clickme
        {
            font-size: 100%;
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 50px;
            background-color: green;
        }
    }

颜色是红色，但是如果我添加一个 or 子句

    @media (min-device-width: 480px) or (orientation: landscape)
    {
        #clickme
        {
            font-size: 100%;
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 50px;
            background-color: green;
        }
    }

设备是纵向的，按钮是绿色的

是否可以在不借助单独查询的情况下解决此问题？

【问题讨论】：

标签： iphone css media-queries

【解决方案1】：

or 不是媒体查询中的有效关键字。

您需要有单独的媒体查询，但要将它们与逻辑 OR 组合在一起，请使用逗号：

@media (min-device-width: 480px), (orientation: landscape)

【讨论】：

呃，谢谢。语言太多，脑子不够用。我忘了这个。