This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



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) { ... }