I hope you enjoy reading this article, which was written to help you become acquainted with some CSS units.

Introduction

The CSS property has its own units of measure. I wanted to cover the ones we use the most.

1 pixel (pixel)

In CSS, a pixel is a point on the user's screen whose physical size is determined by the device's resolution and the distance from which the person looks at the surface (cell phone or TV). It was previously mostly used in responsive designs. However, different CSS units began to be preferred for responsive design over time. Let's not forget that we're still working in pixel units.

1 percent (1%)

The value is determined by the value of the parent tag attribute. When the width of the parent element is reduced, the width of the element also decreases, but the font does not.

1 em

The Font size is a responsive Topography measurement unit. It is in charge of the font size of the current element. Em will provide users with a better experience when resizing to fit their screen. However, because the font size changes, it is not permitted to change from one hand over the parts that are used again when a change is requested. Using the "em" measure can be a little tricky. Setting menu items' padding, margin, and line height to "em" values works well for appropriately scaling navigation menu items.

html{
 font-size:18px;
}
section{
 font-size:14px;
 padding:3em;
}

//Computed Style

html{
 font-size:18px;
}
section{
 font-size:14px;
 padding-top:42px;
 padding-bottom:42px;
 padding-left:42px;
 padding-right:42px;
}

padding-top:14x3=42px;padding-bottom:14x3=42px;

padding-left:14x3=42px;padding-right:14x3=42px;

html{
 font-size:16px;
}
.content-main{
 font-size:1.5em;
}
.container{
 font-size:1.5em;
 padding:2em;
}

html{
 font-size:16px;
}
.content-main{
 font-size:24px;
}
.container{
 font-size:36px;
 padding-top:72px;
 padding-bottom:72px;
 padding-left:72px;
 padding-right:72px;
}

The calculated padding values will be as follows.

.content-main{ font-size:16 x1.5=24px}

.container{padding:16 x 1.5 x 1.5 x 2 = 72}

1rem

When using rem, the font size in px is dependent on the font size of the document's root element.

html{
 font-size:18px;
 margin:2rem;
}

html{
 font-size:18px;
 margin:2rem;
}

margin-top:18x2=36px;margin-bottom:18x2=36px;

margin-left:18x2=36px;margin-right:18x2=36px;

When I search a question on the internet wondering about "em" vs "rem" it made an answer. this is it:

In general, "rem" units are more predictable than em units because they are not affected by changes in parent elements’ font sizes. However, "em" units can be useful when you want to create scalable designs that adjust based on their container’s size.

Em and rem units can be selected to be compatible with various screen and font sizes. It can make the user's visualization easier, especially in responsive design. However, when used excessively on complex websites, it can confuse and have an impact on performance. Due to inheritance issues, em can be difficult to follow and computationally complex in specific units of measure. In the beginning, I believe CSS students should learn the subject thoroughly, apply it, and gain experience.

1vw

It covers 1% of the width of your window.

.element{
 width:20vw;
}

If you want to know the value from the unit pixel type you use, you can formulate the calculations over the width of the screen.

we get the result: 900 x 20% = 180px

1vh

It covers 1% of the height of your window.

.element{
 height:40vw;
}

Formulated over the height of the opened window in our calculations,

we get the result: 350 x 40% = 140px

Vmin

Due to its small size, it only takes up 1% of the screen. It is created using the shortest screen resolution portion of our screen.

On mobile phones, when we hold the vertical and horizontal phones, 1vmin = 1vw, and "vh" is equivalent to whichever is smaller.

Vmax

According to the large size, it takes up 1% of the screen. It is based on the screen resolution portion of our screen that is the longest. It allows us to keep the line length readable within the confines of the screen size. It ensures that the texts in various elements fit the screen optimally.

When holding the vertical and horizontal phones, 1vmin = 1vw, and vh is equivalent to whichever is greater.

For example, if the browser has a width of 200px and a height of 750px, respectively, then 1vmin = 2px, 1vmx = 7.5px.

Calc()

The Calc function helps us make simple calculations. These operations are addition (+), subtraction (-), multiplication (*), and division (/). The order of operations is important.

• Addition operation: Calc(unit + unit) Example:height: calc(50%+200px) Here we increase the total height by half and 200px.

• Subtraction: Calc(unit - unit) Example:height: calc(100%-200px) Here we subtract 200px from the total height.

• Multiplication: Calc(unit unit) Example:font-size:calc(2.5rem * 2) Here 2.5rem * 2=5rem.

• Division operation: Calc(unit / unit) Example:width: calc(100 % 3) If we want to bring the div part side by side, we can use it like this.

When we use "vw" or "vh" units, the Calc() function can use this function to add it above the value, preventing it from falling below the screen size's minimum values.

.box{
 font-size: calc(9px + 2vw);
}

Another option is to configure the screen sizes using the Vmin and Vmix units. The padding, margin, height, and width aspect ratios on the elements can be adjusted so that the font size on the page does not appear smaller than the screen, as well as the white balance and visual hierarchy based on the UI appearance within the screen.

minmax()

It is used in conjunction with CSS. According to the Grids. We use minmax() in CSS to make grids easier and more convenient to place by making the min value equal to and greater than the max value and making it smaller.

CSS minmax has 5 different values in the units.

1. Dimension values (px, em, vm, vh, …)

2. Flexible values (fr)

3. max-content

4. min-content

5. auto

scale()

We can change the aspect ratio of elements in the 2D plane using scale(). The unit value specified in the CSS function scale() is critical. To change elements in the 3D plane, you use scale3D().

scale(sx, sy)

We can use the Scale element to expand or contract our visuals. With the "hover" effect, we can also create more effective applications.

Browser support

Conclusion

Units are the most important thing in CSS that we use from the start. Units are the most important thing in CSS that we use from the start. These units are leading the way and will support it by being sourced.

Resources

Ahmed Shadeed: “CSS Viewport Units,” last update 12 Mar, 2020, https://ishadeed.com/article/viewport-units/

Fatih Hayrioğlu:"CSS minmax"last update 25 November 2019, https://fatihhayrioglu.com/css-minmax-islevsel-degeri/

Mozilla: "scale()" last update 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale