How to write a media query in CSS? - css

Question

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

Answer 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.

Answer 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/

Answer 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'/>