In case this is your first exposure to responsive web design, for the most part, all your custom styles will be in the default section. The other sections are for overriding your default styles to tweak for other device widths and resolutions. The Horizontal Tweaks
section is for overriding styles for landscape orientation. The iPad
section is geared for tablet resolutions between 768px and 1024px. In the HD and Retina Tweaks
section, you will most likely be only overriding background image styles to substitute higher resolution graphics. We'll soon see examples of these in action and we'll put what we use into /css/custom.css
. In the mean time, just look at these structures.
/* CSS Document */ /* Default Styles -------------*/ /* Horizontal Tweaks ----------*/ @media all and (min-width: 480px){ } /* HD and Retina Tweaks ---------*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), ...