@media

by

@media queries are powerful CSS features that allow you to create styles that are specifically tailored to different screen sizes, devices, and orientations. They enable responsive web design, ensuring that your website adapts seamlessly to various viewing conditions.

Syntax

@media [media-type] and (media-feature: media-value) {
  /* CSS rules to apply */
}
  • media-type: Optional, specifies the type of media for which the styles should apply. Common values include:
    • all: Applies to all media types.
    • screen: Applies to computer screens and similar devices.
    • print: Applies to printers.
    • speech: Applies to speech synthesizers.
    • projection: Applies to projectors.
  • media-feature: Specifies a specific condition or property of the media.
  • media-value: Defines the value for the specified media feature.

Common Media Features:

  • min-width: Specifies the minimum width of the viewport.
  • max-width: Specifies the maximum width of the viewport.
  • width: Specifies the exact width of the viewport.
  • min-height: Specifies the minimum height of the viewport.
  • max-height: Specifies the maximum height of the viewport.
  • height: Specifies the exact height of the viewport.
  • orientation: Specifies the orientation of the viewport (portrait or landscape).
  • aspect-ratio: Specifies the aspect ratio of the viewport.
  • resolution: Specifies the resolution of the device.

Examples

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

In this example, when the viewport width is 600 pixels or less, the background color of the body element changes to light blue.

Targeting mobile devices

@media (max-width: 600px) {
  /* Styles for mobile devices */
}

Targeting tablets

@media (min-width: 601px) and (max-width: 992px) {
  /* Styles for tablets */
}

Targeting desktop computers

@media (min-width: 993px) {
  /* Styles for desktop computers */
}

Targeting landscape orientation

@media (orientation: landscape) {
  /* Styles for landscape orientation */
}

Targeting high-resolution devices

@media (min-resolution: 2dppx) {
  /* Styles for high-resolution devices */
}

Additional Tips

  • Combine media features: Use and to combine multiple media features for more specific targeting.
  • Use media queries effectively: Test your styles on different devices and screen sizes to ensure they work as intended.
  • Prioritize mobile-first design: Start with designing for mobile devices and then adapt to larger screens using media queries.
  • Consider user experience: Ensure that your website is easy to use and navigate across different devices and screen sizes.

Example

This example demonstrates how @media queries can be used to create a responsive website that adapts to different screen sizes and provides a consistent user experience across various devices.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Responsive Website</h1>
  </header>
  <section>
    <p>This is a responsive website that adapts to different screen sizes.</p>
    <img src="image.jpg" alt="Responsive image">
  </section>
</body>
</html>

CSS

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

header {
  text-align: center;
}

section {
  padding: 20px;
}

img {
  width: 100%;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  section {
    padding: 10px;
  }
}

/* Media query for tablets */
@media (min-width: 601px) and (max-width: 992px) {
  section {
    padding: 15px;
  }
}

/* Media query for desktop computers */
@media (min-width: 993px) {
  section {
    padding: 20px;
  }
}

Explanation

  • The CSS styles define the basic layout for the website, including font, text alignment, and padding.
  • The img element is set to have a width of 100%, ensuring it always fits the width of its container.
  • The @media queries adjust the padding of the section element based on the screen size:
    • For mobile devices (max-width: 600px), the padding is reduced to 10px.
    • For tablets (min-width: 601px and max-width: 992px), the padding is set to 15px.
    • For desktop computers (min-width: 993px), the padding is set to 20px.