In the interest of ensuring that applications designed with Vega are responsive, elements are designed to fit desktop, laptop, tablet, and other mobile devices. All components and tokens are designed to fit within four different resolutions.
To this end, breakpoints have been configured to fit the following pixel widths:
Pixels are a defined measurement of a unit of size on a computer monitor.
However, there’s a difference between a CSS pixel, a reference pixel, and a hardware pixel.
While CSS pixels are presentation pixels, physical or hardware pixels are not applicable for how we design applications other than when we consider the resolution of the screen. One physical pixel is not equal to one CSS pixel. In fact, a CSS pixel can be made up of multiple resolution pixels. Pixels are not clearly defined entities which remain consistent across all platforms. The CSS pixel exists for this reason.
CSS pixels are not absolute units, like points (pt), centimeters (cm), inches (in), or millimeters (mm). However, these specifications are generally not used in online environments, where it is difficult to measure precisely due to the variation between devices. Absolute units are designed for print environments, and are not applicable to CSS.
To be able to create good designs, it is not necessary to understand the difference between screen specifications and CSS pixels.
While it is possible to obtain the resolution of each device from the manufacturer, when creating designs we are forced to rely more on the abstract notion of CSS pixels. This is particularly true since it is virtually impossible to test against each and every device, of which there are hundreds, if not thousands.
Avoid creating fixed layouts. Because of the variable nature of a CSS pixel, and its variation from the meaning of actual pixels, they are actually not “fixed,” but are instead relative measurements which cannot be as easily managed as some of the relational units of measurement. If we move to relative layouts, and use em and rem in code instead, we can resolve some of these issues.
Due to the above limitations, we should consider using em instead of px as a designator, where 1em = 16px (for a font, for instance). So, for instance, instead of designating something as 8px, we’d refer to it as 0.5em. However we still need to be able to set a root pixel setting for rem measurements to be able to work
We could set a default font size = 16px, but have all other fonts exist as em or rem.
For example:
html,body {
font-size: 16px; // root font-size
}
.some-class {
font-size: 1em;
}
.some-other-class {
font-size: 1rem; // references root font size
}
.some-class-large {
font-size: 2em; // references parent container size
}
.some-other-class-large {
font-size: 2rem;
}
Here we can see that while we have a default size font set in pixels, any other uses are automatically resized based on ratios from this initial setting. This ensures at least some level of consistency of sizing and display across different devices.