Template CSS Media Queries

Here is a collection of CSS media queries for different devices. These queries target the height and device width and apply the properties. Included is a fancy media query template.

Syntax of a media query:

@media media type and (condition: breakpoint) {
  // CSS rules
}

Sometimes CSS media queries might not be the solution, here is an article as to why CSS media queries may not be a great option. Direct Link →

On the other hand, here is a comprehensive list of some available CSS device-specific queries.

Wearables

/* ----------- Moto 360 Watch ----------- */
@media (max-device-width: 218px) 
  and (max-device-height: 281px) {
}

Labtop

Media Queries for laptops are quite of a headache. It’s easier to target between the retina and non-retina screens instead of the many different devices and screen size ranges.

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (min-resolution: 192dpi) {
}

General Device Boilerplate

Checkout Andy Clarke’s short article on these media queries below. This is a small CSS3 template file that will allow you to create a responsive lightweight website. 

/* 

Hardboiled CSS3 Media Queries by Andy Clarke:
License: Creative Commons CC Zero Declaration. No Rights Reserved.

*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
  and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
  and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
  and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
  and (min-width: 1824px) {
  /* Styles */
}

/* High pixel ratio devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

You can find a downloadable link to the CSS query template file above in this CSS query article. Direct Link →

Recommended Articles

Other Articles