CSS Media Queries for All The Common Devices

CSS Media Queries are a feature of Cascading Style Sheets (CSS) that allow you to apply different styles to a website or web application based on the characteristics of the device or screen that is being used to view it.

This can include the size of the screen, the orientation of the device, the resolution of the screen, and many other factors.

Using media queries, you can create different layouts and styles for different devices, such as desktop computers, laptops, tablets, and mobile phones.

This allows you to create responsive web designs that adapt to different screen sizes and provide an optimal user experience on any device.

Media queries are typically written as a block of CSS code that is enclosed in a set of curly braces and preceded by a media type and one or more media features.

For example, the following media query applies styles only to devices with a maximum screen width of 768 pixels:

@media only screen and (max-width: 768px) {
  /* Styles for devices with a maximum screen width of 768 pixels go here */
}

Media queries can be used in conjunction with other CSS features, such as responsive design frameworks, to create flexible and adaptive web designs that look great on any device.

CSS Media Queries for All The Common Devices

here’s an example of CSS media queries for common devices:

/* Extra small devices (phones, up to 576px) */
@media only screen and (max-width: 576px) {
  /* Styles for extra small devices go here */
}

/* Small devices (phones, 576px and up) */
@media only screen and (min-width: 576px) {
  /* Styles for small devices go here */
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* Styles for medium devices go here */
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* Styles for large devices go here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* Styles for extra large devices go here */
}

These media queries target devices with different screen sizes, from extra small devices such as phones up to large desktop screens. You can adjust the specific breakpoints and styles based on your design needs.

Specific media queries for common devices

/* iPhone X */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  /* Styles for iPhone X go here */
}

/* iPad */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
  /* Styles for iPad go here */
}

/* iPad Pro */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 1) {
  /* Styles for iPad Pro go here */
}

/* Galaxy S5 */
@media only screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
  /* Styles for Galaxy S5 go here */
}

/* Surface Duo */
@media only screen and (min-device-width: 540px) and (max-device-width: 720px) and (-webkit-device-pixel-ratio: 2) {
  /* Styles for Surface Duo go here */
}

These media queries target specific devices with different screen sizes, device pixel ratios, and aspect ratios. You can use tools such as BrowserStack or Device Mode in Chrome DevTools to test your website on different devices and adjust your media queries accordingly.