PV Code

1. Pixels (`px`)

The most commonly used unit, representing one pixel on the screen.

/* Example of px */
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

Box with 100px width and height

2. Relative Units (`em` and `rem`)

`em` is relative to the parent font size, while `rem` is relative to the root font size.

/* Example of em and rem */
.parent {
    font-size: 16px;
}

.child {
    font-size: 1.5em; /* 24px relative to parent */
}

.root-relative {
    font-size: 2rem; /* 32px relative to root */
}

1.5em = 24px

2rem = Root Size

3. Viewport Units (`vh` and `vw`)

`vh` and `vw` represent percentages of the viewport height and width.

/* Example of vh and vw */
.box-vh {
    height: 50vh;
    background-color: lightblue;
}

.box-vw {
    width: 50vw;
    background-color: lightgreen;
}

50% of viewport height

50% of viewport width

4. Percentages (`%`)

Percentages are relative to the parent element's dimensions.

/* Example of percentages */
.parent {
    width: 100%;
    height: 200px;
    background-color: lightgray;
}

.child {
    width: 50%;
    height: 100%;
    background-color: lightblue;
}

50% of Parent Width

5. Fraction Units (`fr`)

Used in CSS Grid to allocate space proportionally.

/* Example of fr */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.box {
    background-color: lightcoral;
    text-align: center;
    padding: 20px;
}

1 Fraction

2 Fractions

6. Inches (`in`)

1 inch is equal to 96 pixels (on standard devices). Commonly used for print media.

/* Example of inches */
.box {
    width: 2in;
    height: 1in;
    background-color: lightpink;
}

2 inches wide, 1 inch tall

7. Points (`pt`)

1 point is equal to 1/72 of an inch. Useful for font sizes in print media.

/* Example of points */
.text {
    font-size: 12pt;
    color: darkblue;
}

This text is 12pt.

8. Centimeters and Millimeters (`cm`, `mm`)

Units like `cm` and `mm` are absolute lengths, often used in print layouts.

/* Example of cm and mm */
.box {
    width: 5cm;
    height: 20mm;
    background-color: lightyellow;
}

5cm wide, 20mm tall

9. Minimum and Maximum Units (`min`, `max`)

Use `min()` or `max()` to dynamically calculate values based on multiple units.

/* Example of min() and max() */
.box {
    width: min(50vw, 400px);
    height: max(100px, 10vh);
    background-color: lightgreen;
}

Dynamic dimensions

10. Dynamic Calculations (`calc()`)

Use `calc()` to combine different units in dynamic calculations.

/* Example of calc() */
.box {
    width: calc(100% - 50px);
    height: calc(50vh - 20px);
    background-color: lightgray;
}

Calculated dimensions

11. Root Font Size (`rem`) for Responsive Scaling

Define a root font size to ensure consistent scaling across the document.

/* Example of rem */
:root {
    font-size: 16px;
}

.text {
    font-size: 1.5rem; /* 24px */
}

This text uses `1.5rem`, which is 24px based on root size.

12. Dynamic Viewport-Based Typography

Use `clamp()` to create responsive typography based on the viewport size.

/* Example of clamp() */
.text {
    font-size: clamp(16px, 2vw, 24px);
}

This text scales dynamically between 16px and 24px.

13. Flexbox with Percentage Units

Use `%` units in Flexbox layouts to create proportional spacing.

/* Flexbox Example */
.container {
    display: flex;
    gap: 10px;
}

.box {
    flex: 1 1 50%; /* Take 50% width */
    background-color: lightblue;
    padding: 10px;
    text-align: center;
}

Box 1 (50%)

Box 2 (50%)

14. CSS Grid with Fraction Units

Use `fr` units in CSS Grid for proportional spacing across columns and rows.

/* Grid Example */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.box {
    background-color: lightcoral;
    text-align: center;
    padding: 20px;
}