Responsive Containers Test Page
The two menus below both have identical HTML but are presented differently depending on their current width. At a 'typical' browser width and font size the menu in the smaller column simply lists the links. In the larger column it displays extra images and lays out the options in a grid.
This is achieved with a small piece of JavaScript, which is activated by the code shown below.
<ul class="my-list" data-squery="min-width:30em=wide">
Adding the data-squery attribute above causes a class value of wide to be added to the element when it is wider than 30 ems, and extra CSS is applied to the element based on that class value.
Currently you can use em or px units.