iphone - @media 查询奇怪与 "or"和 iPhone

标签 iphone css media-queries

如果我使用这个查询(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;
        }
    }

并且设备是纵向的,按钮是绿色的

是否可以在不诉诸单独查询的情况下解决这个问题?

最佳答案

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

您需要有单独的媒体查询,但要使用逻辑或将它们组合在一起,请使用逗号:

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

关于iphone - @media 查询奇怪与 "or"和 iPhone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23914253/

相关文章:

jquery - 避免在使用实际和后备图像加载背景图像时闪烁

javascript - 单击后禁用 HTML 链接

android - 视口(viewport)和 CSS 媒体查询的宽度不同?

ios - 使用静态单元格创 build 置场景 - 附上屏幕截图和简单测试用例

iphone - JSON 数据中的 UITableView 部分

iphone - IOS7中的图像背景问题

iphone - 进入 UITableViewCell 编辑模式时的同步动画

css - 如何在没有 javascript 的情况下应用多个 CSS3 旋转转换(复合)?

javascript - css媒体查询有js版本吗? - 用例场景

css - 使用媒体查询隐藏背景图像