Media Query - is height of viewport larger than wi

Question

Is it possible using CSS3 media queries to ask:

'is the height of the viewport larger than the width'?

or:

'is the width of the viewport larger than the height'?

I would like my images to be fluid in both directions!

Thanks.

Answer 1

For this you might use the following media queries:

orientation:portrait
orientation:landscape

I cannot give you more information on the media queries, as I haven't researched them yet. Do make sure they are supported by the devices you wish to support.

As for CSS: no, you cannot detect the width and height of your viewport using CSS. CSS is not a programming language, but a styling language. Unless you're using a CSS preprocessor (Sass, Less), you won't be able to do anything intelligent with it.

Answer 2

Mr. Alien may be right on some technicality, because I'm not a programmer. However, if you want to redesign your layout or make adjustments based on wether the screen is in landscape (width is larger than height) or portrait (height is larger than width) mode, you can definitely use css media queries.

http://www.w3.org/TR/css3-mediaqueries/#media0