What are some examples of media queries in CSS?

What are some examples of media queries in CSS?

Media queries are used in CSS to apply styles based on the device's characteristics. For example:

1. @media (max-width: 600px) { ... } - Styles for devices with a width of 600px or less.
2. @media (min-width: 601px) and (max-width: 1200px) { ... } - Styles for devices between 601px and 1200px.
3. @media (orientation: portrait) { ... } - Styles for devices in portrait mode.

Can you give me a specific example of a media query for a mobile layout?

Sure! Here's a simple example:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  .container {
    padding: 10px;
  }
}

This will change the background color to light blue and adjust padding when the screen width is 600px or less.

How do I test media queries in my browser?

You can test media queries by resizing your browser window or using the developer tools. In Chrome, for example, you can open DevTools (F12), click on the device toolbar icon, and select different device sizes to see how your styles change.

Are there any best practices for using media queries?

Yes! Some best practices include:

1. Mobile-first approach: Start with styles for mobile devices and use min-width for larger screens.
2. Keep media queries organized: Group them together for better readability.
3. Use relative units: This helps maintain responsiveness across different devices.