CSS Media Query

What Are CSS Media Queries?

---

Note

• CSS Media queries let you apply specific CSS rules to a webpage based on certain conditions, like the characteristics of the device displaying the content, such as the viewport width, height, screen resolution, the size of the screen, device type, or even whether it’s being viewed in portrait or landscape mode.
• They allow you to create adaptive layouts, adjust content based on device characteristics, and ensure that users have a smooth experience no matter what device they are using.

Basic Syntax of Media Queries

---

The basic syntax of a CSS media query is:

@media [media-type] and (condition) {
  /* CSS rules */
}

css

• @media: The keyword that starts the media query.
• [media-type]: Optional. Specifies the type of device (screen, print, etc.).
• and: Combines multiple conditions (optional).
• (condition): Specifies the condition for the query (e.g., max-width, min-height, width of the viewport, resolution, orientation).

Example:

In the following example, the background color of the body will change to light blue only if the viewport width is 600px or smaller.

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

css

Common Use Cases of Media Queries

---

Tip

1. Responsive Layouts: Change the number of columns or layout structure based on screen size (e.g., one column for small screens and multiple columns for larger screens).
2. Font size adjustments: Adjust font sizes for readability on various devices.
3. Visibility of elements: Show or hide specific elements depending on the device (e.g., a mobile-friendly menu might be hidden on desktop and shown on mobile).
4. Orientation-based styles: Adjust the layout when the device is in portrait or landscape orientation.

---

Types of Media Features

Media queries can target various media features. Some of the most commonly used features include:

1. Width and Height

• width: The width of the viewport (or device screen).
• height: The height of the viewport (or device screen).

2. Min-width and Max-width

• min-width: Specifies the minimum width of the viewport.
• max-width: Specifies the maximum width of the viewport.

These are the most commonly used features for responsive design, allowing you to target devices based on their screen size.

3. Orientation

• orientation: Defines whether the device is in portrait or landscape mode.

@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }

css

4. Resolution

• resolution: Specifies the resolution of the device, which is useful for high-DPI (dots per inch) screens like Retina displays.

@media (min-resolution: 192dpi) { ... }

css

5. Aspect Ratio

• aspect-ratio: Specifies the aspect ratio of the device’s screen.

@media (max-aspect-ratio: 16/9) { ... }

css

---

Media Query Ranges

You can use min-width and max-width to create responsive ranges that define the different breakpoints for different screen sizes. This technique is often used in responsive web design to ensure your layout adapts at specific intervals.

Example:

/* Styles for small screens */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* Styles for medium screens */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

/* Styles for large screens */
@media (min-width: 1025px) {
  body {
    background-color: lightcoral;
  }
}

css

---

Using Media Queries with CSS

You can write media queries directly within a CSS file, or you can include them in an external stylesheet. Below is an example of a media query applied within a CSS file:

/* Default styles for larger screens */
body {
  font-size: 18px;
  background-color: lightgray;
}

/* Styles for smaller screens */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
    background-color: lightblue;
  }
}

css

In the above example, the body font size and background color change depending on the screen width.

---

Best Practices for Media Queries

1. Mobile-First Approach

• Start by designing your layout for the smallest devices first, and then use media queries to adapt it for larger devices.
• Example:

  body {
    font-size: 14px;
  }
  
  /* Larger screens */
  @media (min-width: 600px) {
    body {
      font-size: 18px;
    }
  }

  css

2. Minimize Breakpoints

• Use as few breakpoints as possible to keep the CSS maintainable.
• Start with basic ranges (e.g., 600px, 1024px) and refine from there if needed.

3. Avoid Overloading Styles

• Don’t define styles in every media query unless necessary; instead, override only the properties that need adjusting.

4. Use Relative Units

• Use relative units (e.g., em, rem, vw, vh) for font sizes, margins, paddings, etc., to make your layout more flexible.

---

Examples of Media Queries

Here are some examples of common media queries used in responsive web design:

1. Mobile-First Design

/* Mobile-first styles */
body {
  font-size: 14px;
  background-color: lightgray;
}

@media (min-width: 600px) {
  body {
    font-size: 16px;
    background-color: lightgreen;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 18px;
    background-color: lightblue;
  }
}

css

2. Portrait vs. Landscape Orientation

@media (orientation: portrait) {
  .sidebar {
    display: block;
  }
}

@media (orientation: landscape) {
  .sidebar {
    display: none;
  }
}

css

3. High-DPI Devices (Retina Displays)

@media only screen and (min-resolution: 192dpi) {
  img {
    max-width: 100%;
    height: auto;
  }
}

css

Combining Multiple Media Queries

---

You can also combine multiple media queries using the and, or, and not operators to create more specific conditions.

Example:

@media screen and (max-width: 800px) and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

css

---

Sizes of Various Device Screens

Below is a table listing the sizes of various device screens in pixels commonly used in CSS responsive design. This is based on common screen resolutions and device types:

Device	Screen Resolution (Width x Height)	Device Type	CSS Media Query Range
iPhone 12/13/14	1170 x 2532	Mobile	max-width: 767px
iPhone SE (2nd Gen)	750 x 1334	Mobile	max-width: 767px
iPhone 6/7/8	750 x 1334	Mobile	max-width: 767px
iPhone X/XS	1125 x 2436	Mobile	max-width: 767px
Samsung Galaxy S20	1440 x 3200	Mobile	max-width: 767px
Pixel 5	1080 x 2340	Mobile	max-width: 767px
iPad Mini (5th Gen)	768 x 1024	Tablet	768px - 1024px
iPad (8th Gen)	810 x 1080	Tablet	768px - 1024px
iPad Air (4th Gen)	820 x 1180	Tablet	768px - 1024px
iPad Pro 11”	834 x 1194	Tablet	768px - 1024px
iPad Pro 12.9”	1024 x 1366	Tablet	768px - 1024px
MacBook Air (13”)	2560 x 1600	Laptop/PC	min-width: 1025px
MacBook Pro (13”)	2560 x 1600	Laptop/PC	min-width: 1025px
Dell XPS 13	1920 x 1080	Laptop/PC	min-width: 1025px
MacBook Pro (16”)	3072 x 1920	Laptop/PC	min-width: 1025px
Microsoft Surface Pro	2736 x 1824	Laptop/Tablet Hybrid	min-width: 1025px
Samsung Galaxy Tab S7	1600 x 2560	Tablet	768px - 1024px
Desktop (Full HD)	1920 x 1080	Desktop	min-width: 1025px
Desktop (4K)	3840 x 2160	Desktop	min-width: 1025px

Media Queries for CSS (Examples):

• Mobile Devices (portrait): max-width: 767px
• Tablets (portrait): min-width: 768px and max-width: 1024px
• Laptops & Desktops: min-width: 1025px

This table is useful for creating responsive designs that adapt to various device sizes.