Making Widgets Scale

Because users can resize widgets any size they wish (within a widget's constraints and/or the dimensions of their computer screen), it's important that the developer write CSS that allows a widget to scale. Here are some tips.

Use CSS ems or Percentages

The best way to allow a widget to change size gracefully is to use CSS ems for font sizes, border widths, shadows, or any attributes that need to grow or shrink when a widget is resized. Using percentages can also also graceful scaling.

Avoid the use of pixel values, as these are absolute values that will remain fixed regardless of the size of the widget. For example, if you set a border width to 5 pixels, it will always be 5 pixels no matter how big or small the widget is resized to. Using ems or percentages will allow the border width to expand based on the size of the widget.

CSS Min and Max

Even though using ems solves most widget scaling problems, when a widget is scaled very large or very small, font sizes or other elements may still exhibit some rendering problems. You can usually solve this by using the CSS min, max, and clamp functions:

.too-small {
    /* Prevent the font size from becoming smaller than 14px */
    font-size: max(1em, 14px);
}

.too-big {
    /* Prevent the font size from becoming larger than 50px */
    font-size: min(1em, 50px);
}

.bordered {
    /* You can also use min and max for other properties like borders */
    /* This prevents the border from becoming smaller than 1 pixel */
    border: max(1em, 1px) solid firebrick;
}