Media Queries

Skeleton uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

  • Smaller than 960: Smaller than the standard base grid
  • Tablet Portrait: Between 768px and 959px
  • All Mobile Sizes: Less than 767px
  • Just Mobile Landscape: Between 480px and 767px
  • Just Mobile Portrait: Less than 479px
Code Example
/* #Media Queries
================================================== */
  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}
  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}
  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}
  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}
  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}