CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Adam Waite
Adam Waite

Reputation: 18855

Media Query - is height of viewport larger than width?

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.

Upvotes: 2

Views: 3102

Answers (2)

Eric
Eric

Reputation: 2034

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

Upvotes: 2

Marijke Luttekes
Marijke Luttekes

Reputation: 1293

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.

Upvotes: 7

Related Questions