Search code examples
cssresponsive-designmedia-queries

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.

Solution

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