Lecture 6: Responsive Web Design with Media Queries

In this lecture, we’ll dive into responsive web design, a crucial skill for creating websites that look great on all devices, from desktops to smartphones. The key to responsive design is using media queries, which allow you to apply different styles based on the screen size or device characteristics.

Understanding Responsive Web Design

Responsive web design ensures that your website adapts to various screen sizes, providing an optimal viewing experience for users regardless of the device they’re using. This approach eliminates the need for separate mobile and desktop sites, streamlining your design process.

1. Why Responsive Design Matters

User Experience: Enhances usability by ensuring your content is accessible and easy to navigate on any device.
SEO: Google and other search engines prioritize mobile-friendly websites in search rankings.
Cost-Efficiency: Saves time and resources by maintaining a single site that works across all platforms.

Introduction to Media Queries

Media queries are the backbone of responsive design. They allow you to apply CSS rules only when certain conditions are met, such as when the screen width falls below a certain threshold.

1. Basic Syntax

A media query consists of a media type and one or more expressions that check for conditions, such as screen width.

Example:

  @media screen and (max-width: 768px) {
    body {
      background-color: lightblue;
    }
  }

This media query changes the background color to light blue on screens that are 768 pixels wide or smaller.

2. Combining Media Queries

You can combine multiple conditions to target specific scenarios.

Example:

  @media screen and (min-width: 600px) and (max-width: 1200px) {
    .container {
      padding: 20px;
    }
  }

This targets screens between 600px and 1200px wide, applying padding to the .container class.

3. Common Breakpoints

Breakpoints are the points at which your website’s layout changes based on the screen size.

Common breakpoints:
- 320px: Small devices (smartphones in portrait mode)
- 768px: Tablets
- 1024px: Small desktops or tablets in landscape mode
- 1200px: Large desktops

Creating a Responsive Layout

Let’s create a simple responsive layout that adjusts based on the screen size.

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

header, nav, main, aside, footer {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

/* Media Query for Tablets and Smaller Devices */
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  nav, aside {
    display: none; /* Hide navigation and sidebar on smaller screens */
  }
}

In this example:

The layout uses CSS Grid to create a two-column layout on larger screens, with the sidebar alongside the main content.
A media query at 768px is used to switch to a single-column layout, hiding the navigation and sidebar on smaller screens.

Responsive Images

In addition to responsive layouts, you should also ensure your images scale appropriately on different devices. Use the max-width property to make images responsive.

Example:

  img {
    max-width: 100%;
    height: auto;
  }

This ensures that images never exceed the width of their container and maintain their aspect ratio.

Practice Exercise

Create a webpage with a multi-column layout using CSS Grid.
Use media queries to adjust the layout for different screen sizes (e.g., hiding elements or changing column numbers).
Make sure all images on the page are responsive by applying the max-width property.

Next Up: In the next lecture, we’ll explore CSS Transitions and Animations, where you’ll learn how to add dynamic effects to your website, making it more interactive and engaging. Stay tuned!

follow me on LinkedIn-

Ridoy Hasan