While exploring the inns and outs of responsive design, media queries definitely take the forefront in permitting tweaks to design layouts on multiple screens (aka. devices). Here is a cheat sheet for copying and pasting media queries into your own CSS.
There is debate regarding whether one should have a style sheet for each specific media query and thus target via a <link> element or if they should all be buried in a master style sheet. The simple answer is to choose the approach that is best for the scope of the project you are working on.
Most projects have the strong likelihood that the CSS will need to be modified at some point in the future. If this is the case for you, I would recommend the modular approach during the development stage for readability and organization. That being said, once the project is ready for build I would recommend combining all the CSS files into one minified version in order to reduce http requests. As the project evolves and CSS changes inevitably occur, re-minify and replace override the existing CSS. I believe there are programming ways of achieving this end result instead of having to do it manually, but I’m not a programmer so ask your developer friends.
Media Queries Syntax
Width & Height (of the browser window or the viewport)
@media only screen and (max-width: 480px) {…} @media only screen and (min-width: 320px) {…} @media only screen and (max-width: 480px) and (min-width: 320px) {…}- Targets specific width of the screen regardless of device, can target a pixel range with min and max
Device Width & Height
@media only screen and (max-device-width: 480px) {…}- Targets specific width of a device
Orientation (Landscape or Portrait)
@media only screen and (orientation:portrait) {…}- Targets specific device based on orientation
Resolution
@media only screen and (-webkit-device-pixel-ratio: 2.0){…}- Targets Retina Display, for list of vendor prefixes
Aspect Ratio
@media screen and (device-aspect-ratio: 16/9) { … }- Targets device with widescreen (i.e. 1280px x 768px)
0 Comments