How to Set Units
When designing your website, you need to choose the right units to make your site look good on all devices. WebbsAI allows you to set different measurements and sizes using two types of units: absolute and relative.
Absolute units are fixed values that remain the same no matter what device or screen size your website is viewed on. They allow consistent sizing and positioning. In contrast, relative units define the size of an element in relation to another element or the overall size of the viewport.
This means that elements with relative units will change size depending on the surrounding elements or the user’s device. This can be useful for creating a responsive website that looks good on all devices.
While creating your website, you’ll encounter the following units:
| Unit | Type | Definition |
|---|---|---|
| Pixels (px) | Absolute | Relative to the viewing device. Fixed in size. |
| Percentage (%) | Relative | Relative to the size of the parent element |
| Em (em) | Relative | Relative to the font size of the parent element |
| Rem (rem) | Relative | Relative to the font size of the root element |
| Character (ch) | Relative | Relative to the width of the character ‘0’ of the currently-used font |
| Viewport Dimensions (vh, vw) | Relative | Relative to width/height of the browser window |
Accessing Units in WebbsAI
You can set units of different components and elements in two ways:
-
Using the Styles panel.
-
Using the shortcut features by clicking on the element.
The dropdown allows you to choose another unit. The default value is set to pixels. For certain fields, you can also replace the unit with auto.
Choosing the Right Unit
The best unit to use depends on the specific context. Here are some general guidelines:
-
Use pixels (px) to precisely position and size small elements such as icons, buttons, or background images. Only use pixels when absolutely necessary.
-
Use percentages (%) for defining sizes relative to their parent containers. They are best used in fluid layouts (important for mobile-first design).
-
Use em (em) for defining element sizes relative to their surrounding elements.
-
Use rem (rem) for consistent sizing across different nesting levels of elements.
Rem units are more scalable than em units. They are less likely to cause problems when you make changes to the CSS of your website because all the different elements in your site depend on the one root.
-
Use viewport units (vw, vh) for creating elements that adapt to different screen sizes and orientations. They are handy for full-width elements, responsive navigation bars, and modal windows.