aspect-ratio
Summary
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.
Syntax
- aspect-ratio: <ratio>
- min-aspect-ratio: <ratio>
- max-aspect-ratio: <ratio>
Values
ratio
Value for the aspect ratio of a device’s rendering surface must be a ratio value.
Examples
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) { ... }