Responsive Design Cheat Sheet


"Responsive Web Design" was first described by Ethan Marcotte in 2010. Since that time there has been a responsive Web design revolution of sorts, but you may find evolution of responsive design to be more relevant. Responsive design has greatly impacted the Web design and development industry, and has created a fundamental shift in how websites are being built. As of 2014, the adoption rate of responsive web design is growing rapidly. Here is a responsive design cheat sheet that you may find a useful reference.

Responsive Frameworks

Here are complete frontend frameworks with full CSS and Javascript based components. These frontend frameworks include typography, sets of forms, buttons, icons and other reusable components such as navigation, alerts, popovers, buttons, images and HTML layouts.

Responsive Grids

Here are simple grid systems that are used to achieve responsive layouts. They offer CSS style sheets with column systems to facilitate the distribution of different elements accordingly on different devices sizes.

Responsive Snippets

A collection of code examples, and places to find snippets for responsive design.

Typical Viewport Sizes

Responsive Media Queries

  • Bootstrap
    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */
      
    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) { ... }
      
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) { ... }
      
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { ... }
    
  • Foundation
    @media only screen { } /* Define mobile styles */
      
    @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles */
      
    @media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
      
    @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px */
      
    @media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
      
    @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */
      
    @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
      
    @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */
      
    @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
      						
  • Pure CSS
    /* Small */
    @media (min-width: 35.5em) { ... }
      
    /* Medium */
    @media (min-width: 48em) { ... }
      
    /* Large */
    @media (min-width: 64em) { ... }
      
    /* X-Large */
    @media (min-width: 80em) { ... }
    
All Devices and Sizes

Phone

  • Apple
    W x H in pixels
    Size
  • iPhone
    320 px x 480 px
    3.5 inches
  • iPhone 4
    640 px x 960 px
    3.5 inches
  • iPhone 5
    640 px x 1136 px
    4.0 inches
  • iPhone 6
    640 px x 1136 px
    4.5 inches
  • BlackBerry
    W x H in pixels
    Size
  • Bold 9930
    480 px x 640 px
    2.8 inches
  • Q10
    720 px x 720 px
    3.1 inches
  • Torch 9810
    480 px x 640 px
    3.2 inches
  • Torch 9850
    400 px x 800 px
    3.7 inches
  • Z10
    1280 px x 768 px
    4.2 inches
  • Samsung
    W x H in pixels
    Size
  • Samsung Y
    240 px x 320 px
    3.0 inches
  • Samsung S & S2
    480 px x 800 px
    4.5 inches
  • Samsung S3
    720 px x 1280 px
    4.8 inches
  • Samsung S4
    1080 px x 1920 px
    5 inches
  • HTC
    W x H in pixels
    Size
  • Desire 200
    320 px x 480 px
    3.5 inches
  • Desire X
    480 px x 800 px
    4.0 inches
  • Desire SV
    480 px x 800 px
    4.3 inches
  • Sensation
    540 px x 960 px
    4.5 inches
  • One
    1080 px x 1920 px
    4.7 inches
  • LG
    W x H in pixels
    Size
  • Optimus L5
    320 px x 480 px
    4.0 inches
  • Optimus 3D
    480 px x 800 px
    4.3 inches
  • Optimus 4X HD
    720 px x 1280 px
    4.7 inches
  • Optimus G Pro
    1080 px x 1920 px
    5.5 inches
  • Nexus 4
    768 px x 1280 px
    4.7 inches

Tablet

  • Apple
    W x H in pixels
    Size
  • iPad Mini
    1024 px x 768 px
    7.9 inches
  • iPad 1 & 2
    1024 px x 768 px
    9.7 inches
  • iPad 3 & 4
    2048 px x 1536 px
    9.7 inches
  • Amazon
    W x H in pixels
    Size
  • Kindle Fire
    1024 px x 600 px
    7 inches
  • Kindle Fire HD 7
    1280 px x 800 px
    7 inches
  • Kindle Fire HD 8.9
    1920 px x 1200 px
    8.9 inches
  • Asus
    W x H in pixels
    Size
  • Google Nexus 7 (2012)
    1280 px x 800 px
    7 inches
  • Google Nexus 7 (2013)
    1920 px x 1200 px
    7.02 inches
  • Transformer Pad TF300
    1280 px x 800 px
    10.1 inches
  • Transformer Pad Infinity
    1920 px x 1200 px
    10.1 inches
  • New Transformer Pad Infinity
    2560 px x 1600 px
    10.1 inches
  • Barnes & Noble
    W x H in pixels
    Size
  • Nook
    1024 px x 600 px
    7 inches
  • Nook HD
    1440 px x 900 px
    7 inches
  • Nook HD+
    1920 px x 1280 px
    9.0 inches
  • HP
    W x H in pixels
    Size
  • Slate 7
    1024 px x 600 px
    8.9 inches
  • Touchpad
    1024 px x 768 px
    9.7 inches
  • Microsoft
    W x H in pixels
    Size
  • Surface RT
    1366 px x 768 px
    10.6 inches
  • Surface Pro
    1920 px x 1080 px
    10.6 inches
  • Samsung
    W x H in pixels
    Size
  • Galaxy Note
    800 px x 1280 px
    5.29 inches
  • Galaxy Note 2
    720 px x 1280 px
    5.55 inches
  • Galaxy Tab 7.0
    1024 px x 600 px
    7 inches
  • Galaxy Tab 7.7
    1280 px x 800 px
    7.7 inches
  • Galaxy Tab 8.9
    1280 px x 800 px
    8.9 inches
  • Galaxy Tab 10.1
    1280 px x 800 px
    10.1 inches
  • Google Nexus 10
    2560 px x 1600 px
    10.1 inches
  • Sony
    W x H in pixels
    Size
  • Xperia Tablet S
    1280 px x 800 px
    9.4 inches
  • Xperia Tablet Z
    1920 px x 1200 px
    10.1 inches

Laptop

  • Apple
    W x H in pixels
    Size
  • 11' Macbook Air
    1366 px x 768 px
    11 inches
  • 13' Macbook Air
    1440 px x 900 px
    13 inches
  • 15' Macbook Pro
    1440 px x 900 px
    15 inches
  • 15' Macbook Pro Retina
    2880 px x 1800 px
    15 inches
  • Acer
    W x H in pixels
    Size
  • Aspire M5-583P
    1366 px x 768 px
    15.6 inches
  • Aspire V7
    1920 px x 1080 px
    14 inches
  • Asus
    W x H in pixels
    Size
  • Zenbook Infinity
    2560 px x 1440 px
    13.3 inches
  • Taichi
    1920 px x 1080 px
    13.3 inches
  • VivoBook S400
    1366 px x 768 px
    14.1 inches
  • G75VW
    1600 px x 900 px
    17.3 inches
  • Dell
    W x H in pixels
    Size
  • XPS 11
    2560 px x 1440 px
    11.6 inches
  • XPS 12
    1920 px x 1080 px
    12.5 inches
  • Inspiron 15R
    1366 px x 768 px
    15.6 inches
  • Inspiron 17R
    1600 px x 900 px
    17.3 inches
  • HP
    W x H in pixels
    Size
  • Envy Touchsmart 14
    3200 px x 1800 px
    14 inches
  • Envy 15
    1366 px x 768 px
    15.6 inches
  • Envy 17
    1920 px x 1080 px
    17.3 inches
  • Lenovo
    W x H in pixels
    Size
  • ThinkPad T440s
    1600 px x 900 px
    14 inches
  • IdeaPad S500 Touch
    1366 px x 768 px
    15.6 inches
  • Sony
    W x H in pixels
    Size
  • VAIO Pro 13
    1920 px x 1080 px
    13.3 inches
  • VAIO E Series 14
    1366 px x 768 px
    14 inches
  • VAIO Fit E 14
    1600 px x 900 px
    14 inches
  • Toshiba
    W x H in pixels
    Size
  • Kirabook
    2560 px x 1440 px
    13.3 inches
  • Satellite P845t
    1366 px x 768 px
    14 inches
  • Qosmio X75
    1920 px x 1080 px
    17.3 inches
  • Qosmio X870
    1600 px x 900 px
    17.3 inches

Desktop

  • Apple
    W x H in pixels
    Size
  • 21.5' iMac
    1920 px x 1080 px
    21.5 inches
  • 27' iMac
    2560 px x 1440 px
    27 inches
  • Acer
    W x H in pixels
    Size
  • Aspire ZC-605
    1600 px x 900 px
    19.5 inches
  • Aspire 7600U
    1920 px x 1080 px
    27 inches
  • Asus
    W x H in pixels
    Size
  • ET2311
    1920 px x 1080 px
    23 inches
  • ET2702
    2560 px x 1440 px
    27 inches
  • Dell
    W x H in pixels
    Size
  • Inspiron One 20
    1600 px x 900 px
    20 inches
  • Inspiron One 23
    1920 px x 1080 px
    23 inches
  • XPS One 24
    1920 px x 1200 px
    24 inches
  • XPS One 27
    2560 px x 1440 px
    27 inches
  • HP
    W x H in pixels
    Size
  • Envy Rove 20
    1600 px x 900 px
    20 inches
  • Pavilion 23
    1920 px x 1080 px
    23 inches
  • Lenovo
    W x H in pixels
    Size
  • IdeaCentre Horizon
    1920 px x 1080 px
    27 inches
  • Sony
    W x H in pixels
    Size
  • VAIO Tap 20
    1600 px x 900 px
    20 inches
  • VAIO L
    1920 px x 1080 px
    24 inches


Codeply ©2014-2016