What is Responsive Design?

Part of the Styling with CSS section of Coddy's HTML journey — lesson 61 of 76.

In web design, responsive design is an approach that aims to create web pages that adapt and provide an optimal viewing experience across a wide range of devices, from desktop computer monitors to mobile phones. A responsive website automatically adjusts its layout, content, and functionality based on the screen size, resolution, and orientation of the device it is being viewed on. The goal of responsive design is to ensure that users can easily access and interact with the website, regardless of the device they are using.

Responsive design is achieved through a combination of techniques, including:

Flexible grids and layouts: Using CSS grid or Flexbox to create layouts that can adapt to different screen sizes.

Flexible images and media: Ensuring that images and other media scale proportionally with the layout.

Media queries: Applying different CSS styles based on the characteristics of the device, such as screen width, height, and orientation.

As more people use mobile devices to browse the web, responsive design is essential for making websites easy to use. It ensures your site looks good and works well on any device, giving users a smooth and consistent experience.

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and two images (<img>). Your task is to add some basic CSS to make the elements responsive and clearly demonstrate the difference between fixed height and auto height. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the font-size to 5vw. This will make the heading's font size responsive to the viewport width.
Write a CSS rule that targets the <p> element. Set the font-size to 3vw. This will make the paragraph's font size responsive to the viewport width.
Write a CSS rule that targets the .fixed-height class. Set the width to 100% and height to 150px. This will create a distorted image by forcing a fixed height.
Write a CSS rule that targets the .auto-height class. Set the width to 100% and height to auto. This will make the image scale proportionally while maintaining its aspect ratio.
Write CSS rules for the containers (.container) to give them a width of 300px, border of 2px solid #ccc, margin of 20px, and padding of 10px.

Cheat sheet

Responsive design creates web pages that adapt to different devices and screen sizes through flexible layouts, scalable media, and media queries.

Key techniques for responsive design:

Flexible grids and layouts: Using CSS Grid or Flexbox
Flexible images and media: Scaling proportionally with layout
Media queries: Applying different styles based on device characteristics

Use viewport units for responsive typography:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Make images responsive with proper scaling:

/* Fixed height - causes distortion */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Auto height - maintains aspect ratio */
.auto-height {
  width: 100%;
  height: auto;
}

Try it yourself

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>