An Ultimate CSS Boilerplate for Your Next Responsive Design

by Saad Irfan

Designing your next website? Is it future ready? Designing a responsive web design isn’t a rocket science and retina images shouldn’t scare you if you know your CSS.

Here I’m sharing a simple CSS boilerplate from my library that I pretty much use every time for my responsive web design projects. Thanks to the CSS media queries, now you can target the mobile and tablet devices just by simple media queries.

Click here to download this Boilerplate (responsive.css)

Targeting Retina Devices:

@media all and (-webkit-min-device-pixel-ratio:2) {

#sampleImage{

background-image: url(‘[email protected]’); /* place your retina image here */

-webkit-background-size: 1000px 100px; /* use your non-retina image dimensions here */

}

}

Screen Shot 2012-12-26 at 3.45.55 PM

 

Remember that IE doesn’t support device-pixel-ratio media query, so if you are planning to make it work for IE as well, you need to adopt the following method instead.

@media

(-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi){

#sampleDiv{  /* Styling Goes here */}

}

Looking for more CSS aspect ratios? Continue reading.

 

Targeting Tablets and iPad:

Portrait and Landscape, both:

@media all and (device-width: 768px)

and (device-height: 1024px) {

#sampleDiv{ /* Your styling goes here */ }

}

An Ultimate CSS Boilerplate for Your Next Responsive Design - iPad

Portrait only:

@media all and (device-width: 768px)

and (device-height: 1024px)

and (orientation:portrait) {

#sampleDiv{ /* Your styling goes here */ }

}

Landscape only:

@media all

and (device-width: 768px)

and (device-height: 1024px)

and (orientation:landscape) {

#sampleDiv{ /* Your styling goes here */ }

}

 

Targeting Smartphones and iPhone:

Portrait:

@media only screen

and (max-width: 767px) {

#sampleDiv{ /* Your styling goes here */ }

}

Landscape:

@media only screen

and (min-width: 480px)

and (max-width: 767px) {

#sampleDiv{ /* Your styling goes here */  }

}

An Ultimate CSS Boilerplate for Your Next Responsive Design - iPhone

For Other Phones:

Smartphone certainly doesn’t mean iPhone only. So if you wish you treat other smartphone users as well, here are some of the media queries that you can use to target specific styling.

 

Portrait and Landscape

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

#sampleDiv{ /* Your styling goes here */  }

}

Landscape Only:

@media only screen

and (min-width : 321px) {

#sampleDiv{ /* Your styling goes here */  }

}

Portrait Only:

@media only screen

and (max-width : 320px) {

#sampleDiv{ /* Your styling goes here */  }

}

Did you know?

Devices with min-device-pixel-ratio 1

  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S

Devices with min-device-pixel-ratio 1.3

  • Google Nexus 7

Devices with min-device-pixel-ratio 1.5

  • Google Nexus S
  • Samsung Galaxy S II
  • HTC Desire
  • HTC Incredible S
  • HTC Velocity
  • HTC Sensation

Devices with min-device-pixel-ratio 2

  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPad 3
  • iPad 4
  • Google Galaxy Nexus
  • Google Nexus 4
  • Google Nexus 10
  • Retina MackBooks
  • Samsung Galaxy S III
  • Samsung Galaxy Note II
  • HTC One X

Click here to download this Boilerplate (responsive.css)