Element Percentage Units - tomhodgins/process-css-demo GitHub Wiki

These units are similar to CSS's Viewport-Percentage units (e.g. vw or vmax) except instead of representing 1% of the browser viewport's height or width, these units refer to 1% of the rendered height or width of the element matching the rule.

<number><unit>

• <number> is any number CSS understands
• <unit> is one of --ew, --eh, --emin, --emax

The --ew unit represents 1% of the element's rendered width, so a dimension like 10--ew would represent 10% of the element's rendered width:

font-size: 10--ew;

The --eh unit represents 1% of the element's rendered height, so a dimension like 10--eh would represent 10% of the element's rendered height:

font-size: 10--eh;

The --emin unit represents 1% of the element's rendered size, whichever is shorter between width or height, so a dimension like 10--emin would represent 10% of the element's shortest edge:

font-size: 10--emin;

The --emax unit represents 1% of the element's rendered size, whichever is longer between width or height, so a dimension like 10--emax would represent 10% of the element's longest edge:

font-size: 10--emax;