A complete guide to CSS Media Query

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.

Table of Contents

What is CSS Media Query?
Why use CSS Media Query?
Media Types in CSS3
CSS Media Queries Example
Using CSS Media Query to support older browser versions
- 1. Using Conditional Statements as Comments
- 2. Create Fallback Styles
Testing CSS Media Queries

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.

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.

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 CSS3	Description
all	Default media types, used for all devices
screen	Devices with screens, such as desktops, laptops, phones, and more
print	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.

Futher Read: How to Create Browser-Compatible Smooth Scrolling with CSS and JavaScript

Was this post useful?

Yes, Thanks Not Really