How to write a media query in CSS?

问题:

I need to write different styles in following cases

Device width greater than device height

/* Landscape */
@media screen and (orientation:landscape) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

Device height greater than device width

/* Portrait */
@media screen and (orientation:portrait) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

Orientation doesn't work perfectly in some stages on resizing the browser.

How to write correct CSS?

Is it possible to do so with CSS?

EDIT :

I am attaching image how it looks on resizing the browser

回答1:

You have access to the browser's aspect ratio with these media query features: aspect-ratio | min-aspect-ratio | max-aspect-ratio. For more info, check out CSS media queries on MDN.

Portrait has an aspect ratio greater than 1:1 and landscape is less. To verify, I made a JSFiddle that changes color when you switch from "landscape" to "portrait".

Try this:

/* Landscape (i.e. wide viewport) */
@media screen and (min-aspect-ratio: 1/1) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

/* Portrait (i.e. narrow viewport) */
@media screen and (max-aspect-ratio: 1/1) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

Update: The image is part of the flow of the document, and won't fill the viewport unless the body also fills the viewport with body {height: 100%;}, as in this JSFiddle.

Try img {position: absolute;} to pull the image out of the flow, so it's dimensions aren't constrained by the body's size. See JSFiddle.

回答2:

The problem that you were having was that you were relying on the text "orientation:landscape" which is not recognised by browsers. Use the code below which check the height and width of a device to calculate its orientation. Credit to css-tricks.com who can really help with media queries, here is an example of the most common uses of media queries.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Source http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

回答3:

I have a similar need but I was using:

        <link rel='stylesheet' media='screen and (max-aspect-ratio: 4/3)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (min-aspect-ratio: 4/3)' href='css/wide.css' />

The only problem was, when I hit 768 x 1024 it displayed correctly, but when I went to 1024 x 768, I got a blank page. I was using a simple css display assignment like:

display:none;

to turn the div on or off, which works but my question is how can you make a continuos flow without that break? at 1024 x 768

I am using this right now:

        <link rel='stylesheet' media='screen and (orientation:portrait)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (orientation:landscape)' href='css/wide.css' />

I would like to use max-aspect-ratio and what not, because that gives me more control over when change happens. I mean I can't put 1.333 ratio and 1.334 bummer...

--NEW UPDATE

         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:0px) and (max-width:1023px)' href='css/tall.css'/>
         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:1025px) and (max-width:9999px)' href='css/tall.css'/>
         <!-- wide -->
         <link rel='stylesheet' media='screen and (min-aspect-ratio:4/3)' href='css/wide.css'/>

I guess I fixed my problem by doing the above code, which is disappointing. But it works so far, I am just going to have to test for almost every screen to make sure higher resolutions that are EXACTLY 4:3 by the Query "terms" still show. I tried 2048 x 1536 iPad3 Retina and that shows up, don't know why 1024 x 768 fails... but is working with the fix above.

----UPDATE 2 (I hate to be a pain but) This seems to be the cleanest solution for aspect-ratio:4/3 :

         <!-- tall 1.33301 -->
 <link rel='stylesheet' media='screen and (max-aspect-ratio:4095/3072)' href='css/tall.css'/>
         <!-- wide 1.33333 -->
 <link rel='stylesheet' media='screen and (min-aspect-ratio:4096/3072)' href='css/wide.css'/>