CSS Media Queries for Desktop, Tablet & Mobile.

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 */
  
}

Post a Comment

Previous Post Next Post