Skip to main content
device-aspect-ratio media feature

Defined as the ratio of value of the device-width media feature to the value of the device-height media feature.

Possible values

  • Value: <ratio>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Remarks

The Cascading Style Sheets (CSS) <ratio> type is defined in the Media Queries specification as a positive (not zero or negative) integer followed by optional whitespace, followed by a solidus ("/"), followed by optional whitespace, followed by a positive integer—for instance, "16/9".

Examples

The following declarations will all match a device with square pixels that has 1280 horizontal pixels and 720 vertical pixels (that is, a ratio of 16:9).


@media screen and (device-aspect-ratio: 16/9) { 
  ... 
}
@media screen and (device-aspect-ratio: 32/18) { 
  ... 
}
@media screen and (device-aspect-ratio: 1280/720) { 
  ... 
}
@media screen and (device-aspect-ratio: 2560/1440) { 
  ... 
}