HTML Responsive Web Design

How i can use media queries to target specific devices in your CSS?

ธ.ค. 16, 2022

To use media queries to target specific devices in your CSS, you can use the @media rule. Media queries allow you to specify different styles for different media types, features, and conditions.

To use media queries to target specific devices in your CSS, you can use the @media rule. Media queries allow you to specify different styles for different media types, features, and conditions.

Here’s an example of how you can use media queries to apply different styles to different screen sizes:

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}
@media (min-width: 901px) {
  body {
    font-size: 20px;
  }
}

In this example, the mobile-specific style will be applied to devices with a screen width of 600px or less, the tablet-specific style will be applied to devices with a screen width between 601px and 900px, and the desktop-specific style will be applied to devices with a screen width of 901px or greater.

You can also use media queries to target specific features and conditions, such as device orientation (e.g., portrait vs. landscape), aspect ratio, and more.

@media (orientation: landscape) {
  body {
    background-color: blue;
  }
}


@media (min-resolution: 192dpi) {
  img {
    width: 100%;
  }
}

For more information on media queries and how to use them, you can refer to the documentation on the W3C website: https://www.w3.org/TR/css3-mediaqueries/

What are the screen resolutions?

There are a wide variety of devices and screen sizes that people use to access the internet, so it’s difficult to provide a comprehensive list of all available page resolution statistics. However, here are some common screen resolutions that you may want to consider when designing a website:

  • 320×480 pixels: This is a common resolution for smartphones in portrait mode.
  • 480×800 pixels: This is a common resolution for smartphones in landscape mode.
  • 768×1024 pixels: This is a common resolution for tablets in portrait mode.
  • 1024×768 pixels: This is a common resolution for tablets in landscape mode.
  • 1280×800 pixels: This is a common resolution for laptop computers and some desktop monitors.
  • 1920×1080 pixels: This is a common resolution for high-definition television and monitors.

It’s important to note that these are just a few examples, and there are many other screen resolutions that you may need to consider when designing a website. To ensure that your website looks good on a wide range of devices, it’s generally a good idea to use a responsive design approach that adjusts the layout of your website based on the size of the screen it’s being viewed on. This can be achieved using media queries in your CSS, as I mentioned earlier.

For more information on responsive design, you can refer to the following resources:

มองหาFor Designersเพิ่มเติมอยู่ใช่ไหม ลองดูนี่สิ!