@container (width > 300px) -
inline-size
width:200px
width:400px
@container (min-width: 500px) -
inline-size
width:200px
width:600px
@container (max-width: 500px) -
inline-size
width:200px
width:600px
@container (width > 15em) -
inline-size
width:200px
width:400px
The font size for the page is 20px, so 1em is 20px. That means 15em =
300px.
@container (width > 33vw) -
size
width:500px
width:100px;
This is a bit of an odd container query, as it is evaluated relative to
the document, somewhat diminishing its usefulness.
@container (height > 30px) -
size
height:20px
height:30px
height:31px
height:60px
Height must use the size container-type to query the block
axis (vertical in horizontal writing mode).
@container (height > 100vh) -
size
height:20px
height:105vh
This could be an interesting technique to show that content overflows and requires scrolling.
@container (orientation: portrait) -
size
height:100px;width:200px
height:100px;width:100px
height:200px;width:100px;
Square containers (height = width) are defiined as portrait for the
purpose of container queries. Use
aspect-ratio: 1/1 to target only
squares.
@container (orientation: landscape) -
size
height:100px;width:200px
height:100px;width:100px
height:200px;width:100px;
@container (aspect-ratio: 1/2) -
size
width:100px;height:200px;
width:200px;height:100px;
@container (aspect-ratio: 1/1) -
size
width:100px;height:200px;
width:200px;height:200px;
width:200px;height:100px;