Media Queries: Targeting Different Devices in CSS

Media queries are a powerful CSS feature that allows you to create different styles for different devices or screen sizes. This ensures that your website looks and functions optimally on desktops, tablets, and mobile phones.

How Media Queries Work

1. Conditional Statements: A media query is essentially a conditional statement that checks a specific condition.
2. Target Properties: The condition usually involves a media feature, such as:
   • width: The width of the viewport.
   • orientation: The orientation of the device (portrait or landscape).
   • resolution: The screen resolution.
   • aspect-ratio: The aspect ratio of the viewport.
3. CSS Rules: If the condition is met, the enclosed CSS rules are applied.

Targeting Specific Devices

Desktop Computers

• Large screens:

  @media screen and (min-width: 1200px) {
    /* Styles for large screens */
  }
  

• Medium screens:

  @media screen and (min-width: 992px) and (max-width: 1199px) {
    /* Styles for medium screens */
  }
  

Tablets

• Landscape orientation:

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

Mobile Phones

Example: Responsive Typography

body {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

In this example, the font size is set to 16px for small screens (mobile phones). When the screen width is greater than or equal to 768px (tablet or desktop), the font size is increased to 18px.

Key Points:

• Flexibility: Media queries allow you to create flexible layouts that adapt to different screen sizes.
• Specificity: You can target specific devices or screen orientations based on their characteristics.
• Maintainability: By organizing your CSS using media queries, your code becomes more maintainable and easier to understand.

Code Example 1: Targeting Different Screen Sizes

@media screen and (min-width: 1200px) {
  /* Styles for large screens (desktops) */
  body {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* Styles for medium screens (tablets) */
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  /* Styles for small screens (mobile phones) */
  body {
    font-size: 14px;
  }
}

Explanation:

• Three media query blocks: Each block targets a specific screen size range.
• @media screen: This specifies that the rules within the block apply to screen devices.
• and: This keyword combines multiple conditions within a media query.
• min-width and max-width: These properties set the minimum and maximum widths of the viewport, respectively.
• CSS rules: The styles within each block are applied to the body element, adjusting the font size based on the screen size.

@media screen and (orientation: landscape) {
  /* Styles for landscape orientation */
  .image {
    width: 100%;
    height: auto;
  }
}

@media screen and (orientation: portrait) {
  /* Styles for portrait orientation */
  .image {
    width: auto;
    height: 100%;
  }
}

• Two media query blocks: One for landscape orientation and one for portrait orientation.
• orientation: This property specifies the orientation of the viewport.

Code Example 3: Targeting Specific Devices

@media only screen and (device-width: 320px) and (device-height: 568px) {
  /* Styles for iPhone 5/SE */
  .header {
    background-color: #ff0000;
  }
}

• One media query block: Targets the iPhone 5/SE specifically.
• device-width and device-height: These properties specify the device's physical dimensions.
• CSS rules: The styles within the block are applied to the .header class, changing its background color.

Additional Notes:

• You can combine multiple conditions within a media query to target specific devices or screen configurations.
• It's generally recommended to use a responsive design approach, where styles adapt to different screen sizes rather than targeting specific devices.
• Media queries provide a flexible way to create responsive websites that look and function well on various devices.

Alternative Methods to Media Queries

While media queries are the most common approach for creating responsive designs, there are some alternative methods that can be considered:

Viewport Meta Tag:

• Purpose: Sets the viewport dimensions and scale for mobile devices.
• Syntax:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• Explanation: This tag tells the browser to set the viewport width to the device's screen width and the initial zoom level to 1.0, preventing the page from zooming in or out automatically.

Flexible Layouts:

• Purpose: Creating layouts that adapt to different screen sizes using techniques like fluid grids and percentage-based units.
• Example:

  body {
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .image {
    width: 100%;
    height: auto;
  }
  

  This example uses a flexible container with a maximum width and centered alignment, along with percentage-based image dimensions, to ensure the layout adapts to different screen sizes.

CSS Grid Layout:

• Purpose: Creating complex grid-based layouts that can be responsive.
• Example:

  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
  }
  

  This example creates a grid container with automatically generated columns that adapt to the available space, ensuring the layout remains responsive.

CSS Flexbox:

• Example:

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .item {
    flex: 1 0 300px;
  }
  

  This example creates a flexible container with items that wrap to the next line on smaller screens and are distributed evenly within the container.

JavaScript-Based Solutions:

• Purpose: Dynamically adjusting the layout or content based on screen size or device type.
• Example:

  function adjustLayout() {
    if (window.innerWidth < 768) {
      // Hide elements or adjust styles for mobile
    } else {
      // Show elements or adjust styles for desktop
    }
  }
  
  window.addEventListener('resize', adjustLayout);
  adjustLayout();
  

  This example uses JavaScript to detect the screen width and adjust the layout accordingly, providing a more dynamic approach to responsive design.

When to Use Which Method:

• Media queries: Ideal for simple responsive adjustments and targeting specific screen sizes.
• Flexible layouts: Suitable for creating responsive layouts without relying on media queries.
• CSS Grid Layout and Flexbox: Excellent for complex grid-based or flexible layouts, respectively.
• JavaScript-based solutions: Useful for more dynamic adjustments or when media queries and CSS alone are insufficient.