Media Queries

Media Queries are a powerful tool in CSS that allows you to apply different styles depending on device characteristics, such as resolution, screen orientation, pixel density, and more. Thanks to Media Queries, designers can create responsive websites that adapt to different devices and display conditions.

Basic Applications

Screen Width and Height

Media Queries allow you to apply different styles depending on the screen width and height.

1/* Styles for screens with a minimum width of 600px */
2@media (min-width: 600px) {
3  .container {
4    width: 80%;
5  }
6}
7
8/* Styles for screens with a maximum height of 800px */
9@media (max-height: 800px) {
10  .footer {
11    display: none;
12  }
13}

Screen Orientation

You can also use Media Queries to detect screen orientation (portrait or landscape).

1/* Styles for landscape orientation screens */
2@media (orientation: landscape) {
3  .landscape-layout {
4    display: flex;
5  }
6}

Device Type

Media Queries allow styling depending on the device type, for example, a printer or projector.

1/* Styles for print */
2@media print {
3  body {
4    font-size: 12pt;
5    color: black;
6  }
7}

Advanced Techniques

Combining Conditions

You can combine different conditions in a single query using logical operators such as and, not, and only.

1/* Styles for screens with a minimum width of 800px and maximum pixel density of 2 */
2@media (min-width: 800px) and (max-resolution: 2dppx) {
3  .header {
4    background-color: blue;
5  }
6}

Using CSS Variables

You can also use Media Queries together with CSS variables to create more dynamic and flexible code.

1:root {
2  --main-color: red;
3}
4
5@media (min-width: 800px) {
6  :root {
7    --main-color: blue;
8  }
9}
10
11.header {
12  background-color: var(--main-color);
13}

Media Queries are a key element of responsive web design, allowing precise control over the appearance of a page in different situations. From simple applications, such as adjusting screen width, to advanced techniques using CSS variables, Media Queries offer a wide range of possibilities for modern web designers. Mastering this technique will enable you to create pages that are not only visually attractive but also useful and accessible on different devices and platforms.

Task: Creating a Responsive Layout

Goal

Creating a responsive page layout that adapts to different screen sizes using Media Queries and vw, vh, em, and rem units.

Steps to Complete

1. HTML Structure: Create a new HTML file and add the basic document structure.

   1<!DOCTYPE html>
   2<html lang="en">
   3<head>
   4  <meta charset="UTF-8">
   5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6  <link rel="stylesheet" href="styles.css">
   7  <title>Responsive Layout</title>
   8</head>
   9<body>
   10  <header class="header">
   11    <h1>Responsive Design</h1>
   12  </header>
   13  <main class="main-content">
   14    <section class="section">
   15      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   16    </section>
   17    <section class="section">
   18      <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</p>
   19    </section>
   20  </main>
   21  <footer class="footer">
   22    <p>&copy; 2024 Responsive Design</p>
   23  </footer>
   24</body>
   25</html>

2. Basic CSS Style: Add styling in the styles.css file.

   1body {
   2  font-family: Arial, sans-serif;
   3  margin: 0;
   4  padding: 0;
   5}
   6
   7.header, .footer {
   8  background-color: #333;
   9  color: #fff;
   10  text-align: center;
   11  padding: 1rem 0;
   12}
   13
   14.main-content {
   15  padding: 1rem;
   16}
   17
   18.section {
   19  margin-bottom: 1rem;
   20  padding: 1rem;
   21  background-color: #f4f4f4;
   22}
   23
   24p {
   25  font-size: 1rem; /* 1rem = 16px */
   26  line-height: 1.5;
   27}
   28
   29h1 {
   30  font-size: 2rem; /* 2 * 16px = 32px */
   31}

3. Responsive Units and Media Queries: Add media queries and use vw, vh, em, and rem units.

   1/* Style for devices with a minimum width of 600px */
   2@media (min-width: 600px) {
   3  .main-content {
   4    padding: 2rem;
   5  }
   6
   7  .section {
   8    margin-bottom: 2rem;
   9    padding: 2rem;
   10  }
   11
   12  p {
   13    font-size: 1.2rem; /* 1.2 * 16px = 19.2px */
   14  }
   15
   16  h1 {
   17    font-size: 3rem; /* 3 * 16px = 48px */
   18  }
   19}
   20
   21/* Style for devices with a minimum width of 800px */
   22@media (min-width: 800px) {
   23  .header, .footer {
   24    padding: 2rem 0;
   25  }
   26
   27  .section {
   28    display: flex;
   29    justify-content: space-between;
   30  }
   31
   32  .section p {
   33    font-size: 1.5rem; /* 1.5 * 16px = 24px */
   34  }
   35}
   36
   37/* Style for devices with a minimum width of 1200px */
   38@media (min-width: 1200px) {
   39  .header h1 {
   40    font-size: 5vw; /* 5% of the browser window width */
   41  }
   42
   43  .section {
   44    margin-bottom: 3rem;
   45    padding: 3rem;
   46  }
   47
   48  .section p {
   49    font-size: 2rem; /* 2 * 16px = 32px */
   50  }
   51}

4. Testing: Test the page at different browser window sizes to make sure the layout adjusts appropriately.

Summary

Media Queries and responsive units (vw, vh, em, rem) are crucial for creating modern, responsive websites. Thanks to them, we can adjust the layout, text sizes, and other elements depending on screen size and other device characteristics. Mastering these techniques allows you to create more flexible, useful, and aesthetically pleasing web designs.