This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



The media feature describes the aspect ratio of the output device’s rendering surface, such as the viewport aspect ratio or the aspect ratio of the page box.


  1. aspect-ratio: <ratio>
  2. min-aspect-ratio: <ratio>
  3. max-aspect-ratio: <ratio>



Value for the aspect ratio of a device’s rendering surface must be a ratio value.


The following example describes a viewport with a minimum aspect ratio of 1. This describes all viewports, which are quadratic or have a landscape ratio. Note: The aspect ratio of the viewport must not be the same as the aspect ratio of the screen. If you want to describe the aspect ratio of the screen, you have to use device-aspect-ratio.

@media screen and (min-aspect-ratio: 1/1) { ... }