How to write a media query in CSS?

Question

I need to write different styles in the 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 does not work perfectly in several stages when resizing the browser.

How to write correct CSS?

Is it possible to do this with CSS?

EDIT:

I am adding an image of what it looks like when resizing the browser

Answer 1

You have access to the browser aspect ratio with these media query features: aspect-ratio | min-aspect-ratio | max-aspect-ratio aspect-ratio | min-aspect-ratio | max-aspect-ratio aspect-ratio | min-aspect-ratio | max-aspect-ratio . For more information, check out multimedia CSS queries in MDN.

The portrait has an aspect ratio greater than 1:1 , and the landscape is smaller. To check, I made a JSFiddle that changes color when switching from "landscape" to "portrait".

Try the following:

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

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

Try img {position: absolute;} to pull the image out of the stream, so its size is not limited by the size of the body. See JSFiddle .

Answer 2

The problem you ran into was that you relied on “orientation: landscape” text that was not recognized by browsers. Use the code below that checks the height and width of the device to calculate its orientation. Credit css-tricks.com, which can really help with media queries, is an example of the most common applications 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/

Answer 3

I have a similar need, but I used:

  <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 that when I typed 768 x 1024, it displayed correctly, but when I switched to 1024 x 768, I got a blank page. I used a simple css display view, for example:

 display:none; 

to turn the div on or off, but my question is how can you make a continuous stream without this interruption? 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 it gives me more control when the change occurs. I mean, I can’t put a coefficient of 1.333 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 assume I fixed my problem by running the above code, which is disappointing. But it still works, I just need to check on almost every screen to make sure that higher resolutions, which are EXACTLY 4: 3 at the request of "conditions" still show. I tried 2048 x 1536 iPad3 Retina and it appears, I don’t know why 1024 x 768 fails ... but it works with the fix above.

---- UPDATE 2 (I hate to be a pain, but) This seems like 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'/>