Media queries for standard devices are a set of predefined media queries that target common device types and screen sizes. These media queries can be used to create responsive designs that adapt to a wide range of devices.
Here are some examples of media queries for standard devices:
Smartphones
/* Smartphones (portrait and landscape) */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles go here */
}
This media query targets smartphones with a screen width between 320px and 480px. It can be used to create a layout that is optimized for small screens, with larger fonts, simplified navigation, and fewer columns.
Tablets
/* Tablets (portrait and landscape) */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
/* Styles go here */
}
This media query targets tablets with a screen width between 768px and 1024px. It can be used to create a layout that is optimized for larger screens, with more columns and a more complex navigation.
Desktops
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles go here */
}
This media query targets desktops and laptops with a screen width of 1224px or larger. It can be used to create a layout that takes advantage of the larger screen real estate, with multiple columns and complex navigation.
High-Resolution Displays
/* High-resolution displays */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min--moz-device-pixel-ratio : 1.5),
only screen and (-o-min-device-pixel-ratio : 3/2),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles go here */
}
This media query targets high-resolution displays with a pixel density of 1.5 or higher. It can be used to create a layout that uses high-resolution images and graphics to take advantage of the higher pixel density.
These are just a few examples of media queries for standard devices. You can use these media queries as a starting point for creating responsive designs that target a wide range of devices and screen sizes.