CSS media queries allow you to apply different styles to your website based on
the size of the user's screen or device. Here are some common media queries
for desktop, tablet, and mobile devices:
-
Desktop: Media queries for desktop devices typically target screens with a
minimum width of 992 pixels. This enables you to apply styles that are
optimized for larger screens, such as wider layouts, more complex
navigation menus, and higher-resolution images.
-
Tablet: Media queries for tablet devices typically target screens with a
minimum width of 768 pixels and a maximum width of 991 pixels. This
enables you to apply styles that are optimized for medium-sized screens,
such as simplified navigation menus, smaller fonts, and more compact
layouts.
- Mobile: Media queries for mobile devices typically target screens with a maximum width of 767 pixels. This enables you to apply styles that are optimized for smaller screens, such as vertical layouts, larger fonts, and simplified navigation menus.
By using CSS media queries, you can create responsive designs that adapt to
different screen sizes and provide a better user experience for your website
visitors.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
Tags:
Web Design