A few years ago, before the arrival of the smart mobile phones, developers were bound to develop a website two times for two different domains or needed to write extra JS code to detect browser whether is it on PC or on mobile. After the official launch of the CSS3 media queries, developer’s life came into ease they get rid of writing code two times. CSS ‘@media‘ rule made developers life easy. It certainly has changed the whole scenario of developing in the modern era.
What does @media query do
A question is raised, what and how does CSS3 ‘@media‘ changed the whole scenario of development. Before this, developers did not have freedom to control HTML elements behavior on different screen resolutions and how to organize if a print command is sent to print the web page. For instance, there is a nav bar on desktop view but we don’t need this nav bar on mobile view instead of this, a menu(by clicking on the button) sliding from the left will be preferred. Similarly, while printing a web page we don’t need to print some of the elements like anchor tags or call to action buttons. CSS3 ‘@media‘ gives developers a full control to handle HTML elements and create different layouts for different screen resolutions it can also utilized in iframe for making responsive video background. Let’s take a look on following:
- @media screen
-
- and (max-width: 1023px;)
- and (min-width: 1024px;)
- @media print
What is @media screen
This obvious property makes it sure that set of instruction will work only on when web pages are displayed on screens only. Instructions or selectors written in @media screen would not work on the print version. Further, we have two major attributes to add in this property.
@media screen and (max-width: 1023px;)
Have a look at the following code.
body{ background-color: #000;}
@media screen and (max-width:1023px){
body{
background-color: #fff;
}
}
In the first line, it is understandable that body will have black color as the background. But what do the other lines will do? The code written under  @media screen and (max-width:1023px){ will run if and only if the screen resolution is less than 1024px and the maximum width of the screen is 1023px. This code will never work on 1024px and higher widths of the screen.
@media screen and (min-width)
See the following code
body{ background-color: #000;}
@media screen and (min-width:1025px){
body{ background-color: #fff;}
}
In this scenario, the output will be alternate to the previous one. The background of the body will be white unless the width of the screen is more than or equal to 1024px. It means, on all small devices having small resolution will show the white background and all the other devices with higher resolution will show black background.
For instance, iPad’s portrait view is 768px wide and its landscape has the width of 1024px. In the first case, iPade will show the black background in the landscape view while the white background in portrait view. In the second case, iPad will show the white background in both resolutions.
By using these screen media queries it is a lot easy to build different layouts for different screen resolutions. These queries give us full control to handle all the HTML elements for all screen resolutions.
@mediaprint
What comes to your mind after reading this? Well, it’s pretty simple all the code written under this territory will only be executed if the print command is sent to the browser to print the content the web page. As described above, mostly clickable links or call to action buttons are not required in print version. Sometimes we remove unnecessary images and backgrounds too from the print version. Have a look below:
@media print{
body{
background: none;
font-size: 12px;
}
button{ display: none;}
}
In print version of the document, the body will show no background and will have small font size to be readable. Similarly, all the buttons elements will not be shown on the print version.
Most importantly, we use these media queries if we write all the code only in one CSS file. There is anther way to do all these things. We can make separate CSS files and will have to attach separately in the HTML while attaching in HTML we have to mention that for what purpose this CSS file is attached.
Fist line describes the usability of the screen.css, it shows that this CSS file will only be working if the web page is being viewed on screen.
Similarly, the second line shows the functionality of the print.css file. In last, all.css will have all the sets of instructions from the both files.
One last thing to remember, if we are making separate CSS files for the screen and the print then we don’t use  @media screen and  @media print queries. As we have already announced in HTML while linking the CSS file.
I hope you find this article fruitful. In the case of any ambiguity get in touch with us.
For reference: Official website, CSS3 Keyframes Animations, CSS4 Sneak Peaks