Web_Dev_Grad

Sizes on websites can be measured using a variety of units, each serving different purposes depending on the layout requirements and responsiveness of your design. The most common categories of units are absolute units and relative units.

• px
• pt
• cm
• mm
• in

These include measurements like px (pixels), pt (points), cm (centimeters), mm (millimeters), and in (inches). Among these, px is by far the most frequently used in web design. A pixel represents a single dot on the screen and provides a fixed size, ensuring consistent display across most devices. However, because pixel density can vary between screens (e.g., standard vs. Retina displays), using pixels can sometimes lead to inconsistencies in scale or readability, particularly on high-resolution displays.

Use pixels for media queries cut offs for screen sizes, as they will work well with the built in bootstrap grid and MaterializeCSS grid systems.

• em
• rem
• %

Relative units, on the other hand, are more flexible and adaptable. These include em, rem, and %. The em unit is based on the font size of the element's parent, while rem is based on the root element's font size (HTML by default which is 16px). This makes rem particularly useful for creating scalable and accessible designs. Percentages (%) are also commonly used for widths and heights, relative to the parent element's dimensions, allowing for fluid and responsive layouts.

Relative units are good to use for text sizes and box sizes throughout your webapp.

• vw
• vh
• vmin
• vmax

Viewport units like vw (viewport width) and vh (viewport height) are measured as percentages of the size of the browser window. For example, 100vw spans the entire width of the viewport, regardless of the screen size. These units are ideal for creating full-screen sections or dynamic spacing that adjusts as the user resizes the browser window. vmin (the smaller of vw or vh), and vmax (the larger or vw or vh) allows you to create consistent scaling on all screens which is best if you do not know if the website will be viewed in portrait or landscape orientation.

The use case for thse are hero banners and images that you want to take up a percentage of the users screen.