In this tutorial, we are going to learn about CSS media queries.
When Steve Jobs first introduced iphone, little did website developers and designers knew they would shift from desktop only to mobile-first development.
Since then Media queries have become a mandatory concept for frontend developers to know about. So lets learn it.
What is a Media query?
A Media query is a CSS3 feature that makes a webpage adapt its layout to different screen sizes.
Ok, lets know about the syntax.
Syntax:
@media only screen (min-width: 1281px) {
//CSS properties
}
We use @media rule of CSS3 and inside curly braces we can use our regular CSS properties.
We have three types of media files
- Screen
- Speech
But we right now are interested only in screens and not others, so we apply media rules only for screens. Leaving it blank means all CSS properties included will be used for all three media types.
After specifying media type we need to use and keyword to concatenate other CSS properties which use something called breakpoints in the media queries.
Breakpoints are points which determine when to change the layout and adapt the new rules inside the media queries.
The width breakpoints of almost all devices:
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets.
769px — 1024px: Small screen laptops, ipad pros.
1025px — 1280px: Desktops, laptops.
1281px and more — Imacs, Big desktop monitor.
For example if we apply min-width:320px, it means that the specified CSS properties will only be applied if the devices have a minimum width of 320px. If the device width is less than 320px the CSS properties will not work.
Apart from these, CSS allows us to define CSS properties for portrait and landscape orientations also.
If we want to provide CSS properties for landscape oriented tablets and mobile screens we can use the below code.
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
Landscape design for tablets are important because people are more likely to use landscape orientation in tablets than in mobile phones in my observation of people.
Points to Remember:
- Default orientation is always portrait and we need not specify it.
- Desktops do not have landscape orientation.
There are a lot of breakpoints to include, below I am going to give my own CSS breakpoints you can use,
/*
Imacs, Big desktop monitor.
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
Laptops,Desktop monitors,ipad pros
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
portrait tablets and ipads
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
Landscape tablets and ipads
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
Landscape for mobiles and tablets
*/
@media (min-width: 481px) and (max-width: 767px) and
(orientation: landscape) {
/* CSS */
}
/*
Mostly all smartphones
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
Like my previous Universal-CSS article, You can copy and paste this in your main.css and
operate in them.
Always use CSS media queries in end of the CSS file.
- You can also use the chrome devtools for knowing the size of devices also.
My Personal experience:
I always forget the syntax of CSS media queries, but know how it works. So whenever I start a new project, I hop on to this CSS media query cheat sheet and use them in my projects.
Thank you for reading!
If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.
Top comments (0)