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

Question

If I use this query (iPhone retina)

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

the color is red, but if I add an or clause

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

and the device is in portrait, the button is green

Is this fixable without resorting to separate queries?

Answer 1

or is not a valid keyword in media queries.

You'll need to have separate media queries, but to group them together with a logical OR, use a comma:

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