**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Responsive Design with Media Queries **Topic:** Using viewport units (vw, vh) and percentage-based layouts. **Introduction** As we continue to explore the world of responsive design, it's essential to understand how to create flexible and adaptable layouts that adjust to different screen sizes and devices. In this topic, we'll delve into the world of viewport units (vw, vh) and percentage-based layouts, which play a crucial role in creating responsive and mobile-friendly designs. **Understanding Viewport Units (vw, vh)** Viewport units are relative units that are based on the size of the viewport (the visible area of the browser). There are two primary viewport units: `vw` (viewport width) and `vh` (viewport height). * `vw`: 1vw is equal to 1% of the viewport width. For example, if the viewport width is 1000px, 1vw is equal to 10px (1% of 1000px). * `vh`: 1vh is equal to 1% of the viewport height. For example, if the viewport height is 700px, 1vh is equal to 7px (1% of 700px). Using viewport units allows you to create layouts that are relative to the viewport size, making it easier to create responsive designs. **Example: Using viewport units for font sizing** Let's say we want to set the font size of our heading elements to be relative to the viewport size. We can use the `vw` unit to achieve this: ```css h1 { font-size: 4vw; } ``` In this example, the font size of the `h1` element will be 4% of the viewport width. This means that as the viewport width increases or decreases, the font size of the `h1` element will adjust accordingly. **Using Percentage-Based Layouts** Percentage-based layouts are another way to create flexible and adaptable layouts. When you set the width or height of an element to a percentage value, it will be calculated relative to the parent element. For example: ```css .container { width: 80%; } ``` In this example, the width of the `.container` element will be 80% of the parent element. **Combining Viewport Units and Percentage-Based Layouts** One of the most powerful techniques in responsive design is combining viewport units with percentage-based layouts. This allows you to create layouts that are relative to both the viewport size and the parent element. For example: ```css .container { width: 80vw; padding: 10%; } ``` In this example, the width of the `.container` element will be 80% of the viewport width, and the padding will be 10% of the parent element. **Key Concepts** * Viewport units (vw, vh) are relative units based on the size of the viewport. * Percentage-based layouts are calculated relative to the parent element. * Combining viewport units and percentage-based layouts allows for flexible and adaptable layouts. **Practical Takeaways** * Use viewport units (vw, vh) for font sizing, spacing, and other layout elements that should be relative to the viewport size. * Use percentage-based layouts for elements that should be relative to their parent element. * Combine viewport units and percentage-based layouts to create flexible and adaptable layouts. **Resources** * [MDN Web Docs: Viewport Units](https://developer.mozilla.org/en-US/docs/Web/CSS/viewport) * [W3C: CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/) * [CSS-Tricks: Viewport Units](https://css-tricks.com/fun-viewport-units/) **Leave a Comment or Ask for Help** If you have any questions or need help with implementing viewport units or percentage-based layouts in your own projects, feel free to leave a comment below. In the next topic, we'll explore **Breakpoints and Designing for Different Screen Sizes**.