Understanding CSS Sections: Pixel, percentage, vvh, vv, vmax, vmin

Introduction:

In the world of web development, CSS plays an important role in determining the layout and appearance of a website. A key feature of CSS is that it uses different units to define dimensions and sizes. In this article, we will explore commonly used CSS elements like Pixels, percentages, vvh, vv, vmax and vmin and understand how they work. We will also provide practical examples to demonstrate their implementation.

1. Pixels (px):

Pixels are the most commonly used component in web development. A pixel is a point on the screen and represents the smallest unit on the screen. Absolute pixel unit, and its size remains constant regardless of screen size or orientation. This can cause conflicts on different devices with different screen densities.

Execution:

.example-element {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

2. Percentage (%):

Shipping unit refers to the size of the main container. If an item is used, a percentage value is calculated based on the dimensions of the basic item. It adjusts to different screen sizes and provides responsiveness, making it a versatile unit.

Execution:

parent-container {
  width: 80%; /* This container's width will be 80% of its parent's width //
}

.child-element {
  width: 50%; /* This element's width will be 50% of its parent's width */
}

3. Viewport height (vvh):

Viewport height (vvh) is a percentage of the entire viewport height. The display height unit is equal to 1% of the display height. This element is useful if you want to size the element based on the height of the user's screen.

Execution:

`.example-element {
  height: 50vvh; /* Height will be 50% of viewer height */
}

4. Display width (vw):

Viewport width (vw) is the same as vvh, but it represents a percentage of the viewport's width. Each display width unit is equal to 1% of the view width. Useful for creating elements that scale proportionally to the width of the user's screen.

Execution:

.example-element {
  width: 30vw; /* Width will be 30% of view width */
}

5. Viewport Maximum (vmax) and Minimum (vmin):

Viewport Maximum (vmax) and Viewport Minimum (vmin) are relative units that indicate the maximum or minimum size of vvh and vv, respectively. Vmax takes the larger dimension, vmin takes the smaller dimension.

Execution:

.example-element {
  width: 50vmin; /* The width will be 50% of the smaller dimension between the width and height of the view */
  height: 70vmax; /* Height will be 70% of the larger dimension between width and height */
}

The results:

In conclusion, understanding and using different CSS sections is important to create an effective and visually appealing website. By knowing when to use pixels, percentages, vvh, vv, vmax and vmin, web developers can ensure that the layout adapts well to different screen sizes and resolutions. Effective implementation of this section will improve the user experience and improve the accessibility of your website.