Stack-and-grow Prototype 02
Providing breakpoints within a container not the viewbox without media queries
This prototype explores the code described by Rémi Parmentier in the tutorial The Fab Four technique to create Responsive Emails without Media Queries, (2016)
The key to the code is the relationship between max-width, width, and min-width.
A further explanation is provided by Raphaël Goetter in the tutorial Head in the Flux!
The cascade rules behind this pattern are described as thus:
if there is no min / max , width wins
if width is greater than max-width , max-width wins
if width is smaller than min-width , min-width wins
The order of execution is important , it is the order of the list, so 1 then 2 then 3. In the end, min-width wins.
min-width() = Desktop Element width
max-width() = 100% Mobile stack
width:calc() = the target breakpoint