At the bottom of your regular CSS stylesheet, place this extra code. Within each @media section, put in your custom CSS directed at that screen resolution. Those CSS styles will only be active on screens of that size or smaller, thus making your site responsive. Each @media section below that, which is targeted at smaller screens, will override the one above it for the smaller screens. Note that you must make sure to order these from largest screen resolution to smallest, like I did below. Also note that you’ll end up with nested brackets since your CSS style brackets will be within the @media brackets. I listed screen resolutions for some popular mobile devices below.
"max-width:", but that is only for testing so that I can see the styles when I use “Responsive Design View” on my large laptop screen browser. When I’m done testing, I replace the “max-width:” with “max-device-width:“. Be sure to do the same. This is because width and device-width mean 2 different things. The newer iPhones have a resolution width that is higher than their actual device-width. The media query max-device-width: 568px will take effect on the newer iPhones, but max-width: 568px will not! The point is this: when you are done testing your styles, replace every instance of max-width: below with max-device-width:
/* @todo put back max-device-width when done testing!!! */
@media screen and (max-width: 768px){
/* place here CSS targeted at iPads and smaller, including iPhones and small hand-held devices */
}
/* @todo put back max-device-width when done testing!!! */
@media screen and (max-width: 568px) {
/* place here CSS targeted at iPhones and smaller screen sizes, not iPads */
}
/* @todo put back max-device-width when done testing!!! */
@media screen and (min-width: 570px) and (max-width: 768px){
/** iPad only, or other similar-sized pads. Not iPhones, not smaller hand-held devices. **/
}
Screen Resolution Sizes For Mobile Devices
( Screen resolution sizes refer to width, but not necessarily device-width )
First iPhone: 320 x 480 pixels
iPhone 4: 640 x 960 pixels
iPhone 5: 640 x 1136 pixels
iPad 3: 2048 x 1536 pixels
Galaxy S2: 800 x 480 pixels
Galaxy S3: 1280 x 720 pixels
Questions and Comments are Welcome