With the significant growth in non-desktop traffic on mobile and tablet devices, its important that our web sites and web applications are responsive to the size of the device screen. CSS Media Query is important CSS technique that can be utilized to enable responsiveness in your web pages.
Specifically, the CSS @media technique is very helpful to make the pages UI change as per size of screen, device
Detecting Screen Sizes
With the @media CSS code, you can add a breakpoint on different screen sizes and then customize your CSS layouts for that device. For example, you an set a different font for each size, show / hide HTML elements, etc. Here is a code example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
<!—This CSS will be applied on desktop or any other screen -- >
body {
Background-color: #ff0000;
color:#fff;
}
<!—This CSS will get applied on specifically on 480px or less than 480px screen -- >
@media only screen and (max-width : 480px) {
body {
background-color: #000;
color:#fff;
}
}
</style>
</head>
<body>
</body>
</html>
In above example, we have set the page CSS based on the @media tag value. In this case, we are looking for devices with a max width of 480px or full desktop width. We load a red background color on desktop with black text and black background color with white text for mobile devices.
Determining Landscape or Portrait for a Device Using Conditional CSS
The CSS @media technique can also be used to check for screen Portrait or Landscape screen orientation. In CSS, we can have a CSS property that is set when the screen width is wider than its height – e.g. Landscape. Below is example
/*Below CSS code is for the general body tag which will be applied to any screen size */
body {
background-color: red;
}
/* Below css code is speficially for landscape view */
@media only screen and (orientation: landscape) {
body {
background-color: green;
}
}
In the above example, if you view this on a landscape screen such as a desktop or on a mobile device held in landscape mode, it will show background as red. If you are in portrait mode on a mobile device, it will show the page as green.
Show / Hide Element Using Media Query CSS
Using the CSS @media technique, you can also Show or Hide elements as needed. This is pretty common when you need to hide things for smaller devices. Below is an example:
/* If the screen size is 480px wide or less, the Box CSS class will be hidden */
@media only screen and (max-width: 480px) {
.Box {
display: none;
}
}
In above example, the code will display the CSS class “Box” if the device width is more than 480px. On Devices of 480px or less in width, the “Box” class will be hidden.
Multiple Breakpoints
Using CSS @media technique, you can then have multiple breakpoints by adding multiple conditional checks like below:
/* Large Desktop */
@media screen and (max-width: 1020px) { }
/* tablet */
@media screen and (max-width: 780px) { }
/* mobile */
@media screen and (max-width: 480px) { }
There is no doubt the CSS @media technique is a powerful tool to ensure your front end interfaces for your web sites and web applications are responsive and properly tweaked for the type of device being used by the end user.