A Simple Guide to CSS Media Queries 

Follow us on LinkedIn for our latest data and tips!

, ,

A Simple Guide to CSS Media Queries 

Media types were originally introduced in CSS2 as the @media rule. The original idea was to have the ability for different style rules to be applied across different devices. For example, there would be style rules for computers, another one for printers and then smartphones, tablets, and more. These didn’t get picked up and put into widespread use. To counteract that, media queries were introduced in CSS3.

Media queries allow the code to look at the capability of the device rather than what type of device it is.

CSS3 media queries will check to see the width and height of both the device and viewing screen. They also also take into account orientation. The device will either be in landscape mode or portrait (resolution is also considered). The technique is a popular way to supply style changes across different sized devices.

Media Query Syntax

With a couple lines of code, you can style a webpage easily between multiple screen sizes. The properties that will be highlighted and changed across devices include some of the following: width, height, float, and margins.

The media query consists of a few different elements in its syntax. It can contain one or a couple expressions and can return true or false.

@media not / only (type of media) and (expressions) {
    /* CSS Style elements. */

Once a query goes through and is rendered true, meaning it has been applied on a new device with new dimensions and so on, it will display the specified media types for the new device. The corresponding style changes and rules will be applied following all other CSS rules. The not or only operators will imply the changes to made when they become necessary. Here is a list of some of the media types:

Once a query renders true, it will be applied on the new device. The corresponding style changes and rules will follow all other CSS guidelines Here is a list of some of the media types:

  • Value: used to describe the element.
  • All: media used across all types of devices.
  • Print: media used for printers.
  • Screen: Used for varying tablet screens, computers, smartphones, and more.

Media Queries Examples

It’s time to take the skeletal structure of the media query and apply some real expressions and media types to it. Here are a few examples.

 @media screen and (min-width: 750px) 
    #leftsidebar {width: 100px; float: left;
    #main {margin-left:200px;}

The previous example will take a webpage’s menu and then shift that to the side if the minimum width of a the screen is 750px, (iPhone 6). It will float to the left and if it is above the minimum width then the menu will stay on the top of the page.

An additional example will highlight the difference in background color on varying devices.

@media screen and (min-width: 480px) {
    body {
        background-color: blue;

Overall, CSS Media queries are essential for displaying style aspects from one device to another. There is no need for changing the base CSS code. Developers only need to add this new code to be used when a page is displayed on a new device.