CSS Relative Units


  CSS (Cascading Style Sheets) uses different units to measure elements on the page. Relative units allow the design to be more flexible and adaptable to different devices and resolutions.


  Relative units are based on the size of other properties, such as the font size of the parent element, allowing elements to respond to design changes more effectively.

Types of Relative Units


  •   em: Unit relative to the font size of the current element. For example, 2em means twice the current font size.

  •   rem: Unit relative to the root element's font size. It is independent of the parent element's font size. For example, 1.5rem is based on the font size of the <html>.

  •   %: Percentage of the parent element's size. For example, 50% means half the size of the parent element.

  •   vh: Percentage of the browser window's height. 100vh is equal to the full height of the window.

  •   vw: Percentage of the browser window's width. 100vw is equal to the full width of the window.

  Using relative units allows developers to create more fluid and responsive designs, improving the user experience on different devices.