MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS
The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it's simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. The standard media queries for different devices: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /*** iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /*** iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /*** iPads (portrai...