App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide A complete guide to CSS Media Query

A complete guide to CSS Media Query

By Mohit Joshi, Community Contributor -

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. 

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.

Responsive UX of a website

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. 

  1. 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. 
  2. 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. 
  3. 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.
  4. 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.

non responsive vs responsive website

Free Responsive Test on Commonly Used Resolutions

Try testing the responsiveness of your website on real devices.

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 CSS3Description
allDefault media types, used for all devices
screenDevices with screens, such as desktops, laptops, phones, and more
printStyles are applied when the document is printed
speechFor devices used in speech synthesis and screen reading
projectionDevices like projectors, and presentation screens
handheld Handheld devices such as smartphones, tablets, and more
tvSpecific for TV screens
brailleDevices targeting Braille devices used for visual disablement
3d-glassesDevices like 3D glasses 
gridGrid-based devices like e-book readers

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 

  <link rel="stylesheet" href="styles.css">
  <title>A complete guide to CSS Media Query</title>
  <nav class="navbar">
    <div class="logo">CSS media query</div>
    <div class="menu-toggle">
    <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>

HTML file for CSS Media Query Example

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;

CSS File for CSS Media Query Example
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%;
    } {
      display: flex;

CSS Media Query Example

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">


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.

Testing CSS Media Query on BrowserStack Responsive

2. Enter the Website: For example, let’s enter any popular website.

Testing CSS Media Query responsiveness on BrowserStack Responsive Tool

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


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.

Responsive UI Testing Website Testing

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