Media queries - RmlUi Documentation

The RCSS at-rule @media can be used to dynamically activate and deactive style rules based on a given set of conditions. The RCSS media queries follow the CSS syntax with some extensions and limitations.

@media (orientation: landscape) and (min-width: 640px)
{
	#menu {
		float: left;
		width: 320px;
	}
}

@media (min-resolution: 2x)
{	
	@spritesheet theme2x
	{
		src: invader2x.tga;
		resolution: 2x;
		
		icon-invader: 179px 152px 102px 78px;
		icon-game:    330px 152px 102px 78px;
		icon-score:   534px 152px 102px 78px;
		icon-help:    728px 152px 102px 78px;
	}
}

@media (theme: blue)
{
	body {
		color: blue;
	}
	#header {
		background-color: #33e;
	}
}

Media features

The following table lists all supported media features.

Name	Range	Value	Description
`width`	Yes	<length>	Width of context.
`height`	Yes	<length>	Height of context.
`aspect-ratio`	Yes	<ratio>	Aspect ratio of context (width / height).
`resolution`	Yes	<resolution>	The dp-ratio of the context. Note that <resolution> always takes the `x` unit in RCSS.
`orientation`	No	landscape \| portrait	Orientation based on the context width and height.
`theme`	No	<string>	Custom RCSS feature. Can be activated and deactivated on the context.

Since RmlUi is designed to be displayed on screens and in a controlled environment, it doesn’t make sense to implement all CSS media features.

All range media features can be prefixed with min- and max- to specificy minimum and maximum constraints, respectively. All other constraints are compared for equality.

Limitations

Currently, RCSS has some limitations compared to CSS.

@media rules cannot be nested.
Conditions cannot be nested within a media query, eg. using parenthesis.
Only the and logical operator is supported.
Only a single occurrence of a given feature can be specified in a single media query.
- Except that both min- and max- of the same range feature can be specified.
The CSS Level 4 syntax using <= operators and similar is not supported.