CSS3 Media Query

What is a media query?

CSS3 media queries are used to define CSS styles that are applied to content ONLY when a given screen orientation/size condition is satisfied.

If you are using a browser that supports media queries, this page demonstrates the following:

  1. Rotate* the screen to a landscape orientation.
    • The text displayed below should be aligned in a horizontal layout (columns).
  2. Rotate* the screen to a portrait orientation.
    • The text displayed below should be aligned in a vertical layout (rows).

* If you are using a desktop browser, you can simply resize the browser window.

Landscape

The screen is currently in landscape mode. CSS styles are applied that structure page elements in a horizontal layout.

Portrait

The screen is currently in portrait mode. CSS styles are applied that structure page elements in a vertical layout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nunc orci. Nam ipsum felis, commodo id suscipit ut, semper eu elit. Nam sed sem vitae orci rutrum congue. Aliquam tincidunt mi sed sapien rhoncus a lacinia erat vestibulum. Maecenas adipiscing purus eu orci ultrices gravida. Sed eleifend leo et tortor pharetra scelerisque facilisis ligula euismod. Etiam urna nisl, gravida sed ullamcorper quis, dapibus eget risus.

Sed sapien felis, pharetra eu placerat vel, volutpat sed enim. Integer aliquet imperdiet gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus lacus ut lectus faucibus vel ullamcorper nunc consequat. Nullam pulvinar dui et ipsum fermentum scelerisque. Nam in lectus erat. Phasellus mi enim, dictum at elementum a, molestie at nulla. Maecenas dignissim, libero vitae congue faucibus, purus lorem gravida leo, vitae porttitor enim nibh vitae purus. Quisque sagittis dui tincidunt nunc bibendum luctus. Nam ac velit dui, et luctus dolor. Cras molestie sem ut risus rhoncus in pretium lorem egestas. Aliquam feugiat orci ut nisi gravida gravida.

Nulla aliquam, enim eget mollis placerat, ipsum lectus tempus massa, vel volutpat ante lorem vel risus. Proin felis arcu, facilisis nec malesuada nec, cursus a lacus. Sed vel facilisis est. Morbi bibendum facilisis massa, ut congue augue condimentum dignissim. Curabitur vel sem sit amet ante consectetur consequat. Praesent ac nunc eros, ornare aliquam risus. Quisque venenatis vulputate velit. Nulla luctus, augue et ultricies auctor, ante sem mollis est, in blandit orci quam ac nisi. Integer malesuada adipiscing orci eget volutpat. Cras nec pharetra ipsum. In pellentesque neque at orci tristique id ullamcorper orci hendrerit. Sed ultrices nisi vitae augue molestie porta. Vestibulum pellentesque molestie ligula, a consequat sem egestas sit amet.