Applied to a golden-ratio Flexbox layout
This method will also smoothly scale any object which is sized using em or rem.
@ 48rem+ (768px+)
This text begins to scale-up starting at the minimum font-size 16px and proportionately increasing to 32px as the viewport is stretched to 120rem (1920px).
@ 48rem+ (768px+)
This text starts at the minimum font-size 14.55px and scales up to 29.12px as the viewport is stretched to 120rem (1920px).
Why a golden-ratio example?
It's probably the most difficult fluid grid to achieve with any accuracy.
The value scale is awkward to say the least:
[0.09, 0.146, 0.236, 0.382, 0.618, 1, 1.618, 2.618, 4.236, …]
In the example above @ 48rem+ (768px+) it consistently has:
- Left and right margins of 1.618rem (purple).
- Centre space separator of 2.618rem (green).
- Left column (blue) is always 1.618 * the width of the right column (red).
- Right column font-size is set as (1 - 0.09) * 1rem.
- Padding for each text-area is set at 1em which also scales beautifully.
- For readability; text widths are limited to 34em.
See Demo 2 for a more typical layout.