CSS3 Media Query & Cheat Sheet
Hi Guys, It’s rather impossible to remember all the media queries by heart. This is when cheat sheet jumps in! Here are the most commonly used media queries I’ve gathered.
By using this cheat sheet you can boost your responsive web development.
Let’s get started …
Media queries are the backbone of Responsive Web Design system.
By using media queries we can customise the behaviour(presentation) of DOM elements on the screen for particular devices or screen sizes without changing the actual markup.
Media queries uses the certain breakpoints in the CSS file to change the styling of the HTML elements.
Note : Always place the media queries at the bottom of your style sheet.
Understanding media query syntax
@media not|only (media-type) and (expressions) {
//CSS Code
}
Syntax breakdown:
@media : fixed rule to add CSS only for a specific condition.
Operators : not, only, and — by using these you can create certain conditions.
Media-type : there are a variety of media types available.
- all Used for all devices
- print Used for printing devices
- screen Used for computers, tablets and mobile devices
- speech Used for devices using assistive technologies(screen reader)
The above four are the most common you might have used them also there are more for specific devices as follows
- handheld Used for mobile phones
- tv Used for televisions
- projection Used for projectors
- tty Used for terminals, teletypes
- braille Used for braille devices
- embossed Used for braille printers
Expressions : Threshold value for Breakpoints for defining HTML elements behaviour in specific devices and Orientation (Portrait or Landscape)
Where you can provide value for
- Width
- Height
- Device-width
- Device-height
- Scan
- Monochrome
- Resolution
- Grid
- Color
- Color-index
- Aspect-ratio
- Device-aspect-ratio
- Orientation
Also, Media queries can be used to check many things, such as
- Width & height of the view port
- Width & height of the device
- Orientation (Portrait or Landscape)
- Screen resolutions
Looking for some real responsiveness … it’s here
Below is the list of media queries most of the time used by me for Responsive Web Design.
Breakpoints in the following media queries are created for most common typical device sizes, you can change it as you want and By using operators you can add expressions, orientations for making it more specific as per your project requirement.
Cheat Sheet :
For typical mobile devices
@media only screen and (min-width: 320px) and (max-width: 479px) {
//CSS Code
}
For mobile (landscape)
@media only screen and (min-width: 480px) and (max-width: 767px) {
//CSS Code
}
For tablet
@media only screen and (min-width: 768px) and (max-width: 979px) {
//CSS Code
}
For small desktop
@media only screen and (min-width: 980px) and (max-width: 1023px) {
//CSS Code
}
For typical desktop
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
//CSS Code
}
For large desktop
@media only screen and (min-width: 1200px) {
//CSS Code
}
For printers
@media print {
//CSS Code
}
For screen readers
@media speech {
//CSS Code
}
Add Orientation as expression
@media only screen and (min-width: 1200px) and (orientation : portrait) {
//CSS Code
}
Conclusion :
I hope this article will help to understand media queries and to create responsive environment for your web app in less time.
The above media queries are for typical devices. If you want to go beyond this level, you can make it more specific by adding individual media queries according to Device Model.
Refer this link for device specific media queries :
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Happy Coding …
