What is meaning of %, px, vh, and vw?

%, px (pixels), vh (viewport height), and vw (viewport width) are different units of measurement in CSS, and they serve various purposes in web design. Here's a brief overview of each:

1. Percentage (%):

   • The percentage unit is relative to the parent container's size.

   • For properties like width, height, margin, and padding, using percentages allows elements to scale proportionally based on the size of their containing element.

   • For example, if you set the width of a child element to 50%, it will take up half of the width of its parent container.

    .child {
      width: 50%; /* 50% of the parent container's width */
    }

1. Pixels (px):

   • Pixel units are fixed-size units and provide an absolute measurement.

   • They are often used for properties like font size, border widths, and fixed-size elements.

   • Pixel values are not inherently responsive, and they don't scale based on the viewport size.

    .element {
      font-size: 16px; /* Fixed font size in pixels */
      border: 2px solid #000; /* 2-pixel border */
    }

1. Viewport Height (vh):

   • vhis a unit relative to the height of the viewport (the visible portion of the browser window).

   • For example, setting an element's height to 50vh means it will take up 50% of the viewport height, regardless of the parent container.

    .section {
      height: 50vh; /* 50% of the viewport height */
    }

1. Viewport Width (vw):

   • vwis similar tovh, but it's relative to the width of the viewport.

   • Using vw is useful for creating layouts that respond to the width of the viewport.

    .container {
      width: 75vw; /* 75% of the viewport width */
    }

Conclusion:

When choosing between these units, consider the design requirements and whether you want elements to be responsive to changes in viewport size. Combining these units or using the calc() function allows for more flexible and dynamic layouts in CSS. Each unit has its place in web design, and the choice depends on the specific use case and design goals.