A complete guide to CSS Media Query
By Mohit Joshi, Community Contributor - September 7, 2023
Websites are omnipresent across devices of all shapes and sizes. The ever-expanding nature of websites makes it extend seamlessly to multiple screen sizes. This helps user access websites from anywhere and any device.
A website is valued when you get the same functionality and appearance that suits a phone, tablet, laptop, monitor, etc. This coordination in the visual appearance is achieved with a web development technique known as CSS Media Query. The landscape to achieve responsive websites quickly is conquered with Media Queries, where the static environment becomes fluid and dynamic.
Let’s unravel the mysteries of CSS Media Queries and leverage its strength to make powerful and responsive websites.
Read More: How to build a website using HTML and CSS?
Table of Contents
What is CSS Media Query?
CSS Media query is a technique used for modifying the behaviour and appearance of a website, based on the user’s device conditions such as display size, orientation, resolution, even type of device used, and other browser settings.
In this way, you target the user’s browser settings and other characteristics and based on those you can apply styles to your websites.
It allows developers to create a script such that when a user access the website, it adapts seamlessly to a spectrum of devices and screens, maintaining an optimum user-friendly experience.
There are other ways to access Media Queries such as through HTML, and JavaScript, however, CSS offers the most features and is the most popular place to script Media Queries for a website.
Read More: How to create a Browser specific CSS code?
Why use CSS Media Query?
The primary reason behind the implementation of CSS Media Query is to broader the coverage of a website across the globe to as many users as possible. The responsive nature takes charge of expanding your web application to a range of devices. Let’s dive into some main reasons why one should use CSS Media Query.
- Enhanced User Experience: Different devices come with different screen resolutions and orientations. With the help of CSS Media Queries, one can ensure that the website provides a user-friendly experience to all its visitors and functions optimally without any visual issues.
- Search Engine Optimization: A business relishes when its website is capable of reaching a large audience, however, it is only possible when Google and other search engines up rank your website. These search engines have a policy of only serving well-built websites to the users, therefore a responsive design is always preferred for allowing your website a better reach.
- Global Reach: A large audience is now mobile-based, that access the internet only through mobile phones. To provide a user-friendly experience and to reach that segment of the audience, a responsive website plays a vital role.
- Future Proofing: In the current scenario of the digital landscape, new devices are emerging continuously. A responsive design can easily incorporate any changes without facing any major cause. Also, it ensures the website is adaptable to upcoming screen sizes and resolutions.
Media Types in CSS3
CSS3 is the latest version of CSS (Cascading Style Sheet) which is built upon its precedence versions. The media types in CSS3 specify the type of media or device the which a particular set of styles should apply. There are several media types available that describe the target devices for which the particular property works the best.
| Media Types in CSS3 | Description |
|---|---|
| all | Default media types, used for all devices |
| screen | Devices with screens, such as desktops, laptops, phones, and more |
| Styles are applied when the document is printed | |
| speech | For devices used in speech synthesis and screen reading |
| projection | Devices like projectors, and presentation screens |
| handheld | Handheld devices such as smartphones, tablets, and more |
| tv | Specific for TV screens |
| braille | Devices targeting Braille devices used for visual disablement |
| 3d-glasses | Devices like 3D glasses |
| grid | Grid-based devices like e-book readers |
Read More: How to resize an image using CSS?
CSS Media Queries Example
Now with a practical demonstration let’s understand how to use CSS media queries to make a fully-responsive web application. In this example, we shall create a responsive navbar with a hamburger menu icon that appears on smaller screens.
Step 1: Create an HTML file
<html> <head> <link rel="stylesheet" href="styles.css"> <title>A complete guide to CSS Media Query</title> </head> <body> <nav class="navbar"> <div class="logo">CSS media query</div> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
Step 2: Write CSS
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
font-size: 24px;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle span {
width: 30px;
height: 3px;
background-color: #fff;
margin: 3px 0;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
}
Step 3: Write CSS using Media Queries
@media screen and (max-width: 600px) {
.menu-toggle {
display: flex;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
width: 100%;
}
.nav-links.active {
display: flex;
}
}
Using CSS Media Query to support older browser versions
Media queries are not supported in early versions of web browsers, notably Internet Explorer 8 and prior versions. Our website must be able to interact with visitors using outdated browsers as well to reach a broader spectrum of users globally. Here are a few techniques for making these older browsers responsive.
1. Using Conditional Statements as Comments
Internet Explorer allows conditional comments, which are HTML comments to target different versions of the browser. Here’s how to use Conditional comments for Internet Explorer 8 and earlier versions.
<!--[if lte IE 8]> <link rel="stylesheet" href="fallback-styles.css"> <![endif]-->
2. Create Fallback Styles
The file targeted by the conditional statements leads to an alternative CSS file that activates only when you meet the conditions, in our case it is Internet Explorer version 8 and earlier.
/* Fallback styles for older IE versions */ .header { background-color: #333; color: #fff; padding: 10px; }
Testing CSS Media Queries
BrowserStack is a cloud-testing infrastructure that allows users to test their website in numerous operating systems and web browsers before releasing it to real-world users. Let’s learn how to test the website’s responsiveness using BrowserStack in three easy steps.
1. Sign up/Login on BrowserStack: Get started free by opening up BrowserStack Responsive Design Testing.
2. Enter the Website: For example, let’s enter any popular website.
3. Select the device for the test: Select from the wide range of devices on which you want to run the test. After that, hit the check button to run the testing and see the result.
Try BrowserStack Responsive Tool for Free
Conclusion
The CSS Media Query is an effective way for our website to reach a large audience across the globe. Media Queries allows web applications to be responsive offering a seamless expansion among several devices with a wide range of screen sizes, resolutions, and orientations.
CSS Media Query has contributed equally to the progress of websites from their infancy to the current stage of fully-fledged web pages. The proper understanding of Media Queries, Grid, and Flexbox, and their combination leverages the full potential of CSS. We also took into account a real-world example in which we developed a responsive navbar that, when viewed on smaller devices, shows a hamburger menu symbol.
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
Featured Articles
What are CSS Breakpoints and Media Query Breakpoints
Bootstrap Breakpoints and Media Queries
App & Browser Testing Made Easy
Seamlessly test across 20,000+ real devices with BrowserStack
