Media query tests - width with ems

The width media query uses the width of the layout viewport (or, on desktop, the width of the viewport). The height media query uses the height of the same.

Your browser does not support getComputedStyle(). Therefore this test page doesn’t work. Please ignore the results.

1. Test with width=device-width,initial-scale=1
2. Test with initial-scale=2
3. Test without meta viewport
4. Test with the em and rem units

ems and rems in media queries

In a media query context 1em = 1rem = initial font size. By default that font size is 16px, but it depends on the browser and the user settings. In your browser it’s .

I use the following function to find the initial font size:

function getInitialFontSize() {
	var ifs = window.getComputedStyle(document.documentElement,null).fontSize;
	return parseFloat(ifs);
}

width

Equality

See notes at the bottom of the page. Reload after resizing your window or changing the orientation.

Units

Values

height

Equality

See notes at the bottom of the page. Reload after resizing your window or changing the orientation.

Units

Values