Abstract      

Media queries allow a website of different views on various and different sizes of screens and browsers. While designing a responsive website the one should always consider using conditional loading to reduce the amount of the content that is being requested or sent to a target device.

Introduction

The next question which comes to the designer mind is, what is Media query? It can be defined as an additional feature of CSS which enables the website content to adapt or wrap its content as per the different screen sizes and resolution. In layman words, you can define the Media queries are a fundamental part of responsive web designs which are used to customize the visual of the website for the multiple devices.

Why It’s being used for RWD

Media queries are basically used by a responsive web design company, as it allows a website to be viewed on different screen sizes and browsers. While using the media queries the one should keep in mind that these queries aren’t modular, it can cause design issues and it will be difficult to work around. In order to apply different styles for various screens sizes and devices, we use @media rule. Usage of Media queries helps to several things as like: width and height of the viewport.

• To conditionally apply styles with the CSS @media and @import at-rules.

• To target specific media for the <link>, <source>, and other HTML elements.

Source: Mozilla Developers

How We Can Use Media Queries

The @media rule is used for different media types/devices to apply different styles. For example media type: print, screen or speech is used to specify that certain styles are only for printed documents, or for the screens, for screens readers. And in addition to the media types, there are certain media features available.

With the help of the Media queries, several things can be checked. Some are listed as:

• width and height of the viewport

• width and height of the device

• Orientation (is the tablet/phone in landscape or portrait mode?)

• resolution

Basic Syntax

#box-img {
background-repeat: no-repeat;
background-image:url(‘img.gif’);
}

// It shows a large image when you’re on a big screen
@media screen and (min-width: 1200px) {
#box-img {
background-image:url(‘large-img.gif’);
}
}

// This will remove header image when printing.
@media print {
#box-img {
display: none;
}
}

Another way to add on html page: 

<link rel=’stylesheet’ media=’all’ href=’media.css’ />
<link rel=’stylesheet’ media=’print’ href=’print.css’ />
<link rel=’stylesheet’ media=’screen and (min-width: 480px)’ href=’small.css’ />

The advantage or you can say a plus point using this method is that only the valid CSS is downloaded; so print.css is only downloaded when printing (or using print preview).

If you are thinking to combine Media queries, so yes, it can be done with the help of a comma. The below query is an example

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)

Source: Stack Over Flow

As it is cascading, so all non-overwritten rules remain valid; example: the background remain no-repeat. Using this syntax, one can perform a couple of things:

1. Tweak that font so it really fits on that old iPhone,

2. Remove menus and fluff from Print pages

3. Create a fully responsive site, by creating ‘breakpoints’ where the page should get a different design.

For example:
#Con1, #Con2 {
float: left;
width: 100%;
}

@media (min-width: 1024px) {
#Con1, #Con2 {
width: 50%;
}
}

Types of media query

For target devices, the chosen names of CSS media types define relevant properties which are useful and make sense. The names of media types from the CSS media types listed below are normative, but looking to their description it is very informative. Such as the “Media” field in the description of each property is informative.

all:- Suitable for all devices.

print:-Intended for paged material and for documents viewed on screen in print preview mode.

screen:-Intended primarily for color computer screens.

Speech: Intended for speech synthesizers

Source: W3 Org

Deprecated media types:

Several additional media types as like: tty, tv, projection, handheld, Braille, embossed and aural are from CSS 2.1 and Media Queries 3, but these were deprecated in Media Queries 4, and now shouldn’t be used. The speech type are been used in place of aural, which is similar.

Logical operators use in media queries

and
As the name itself defines, it is used joining the two things/items. The ‘and’ operator is used to join multiple media features into a one single media query. Each is chained to return true in order a query to be true. Also, it is used to combine media features with media types.

Not
In order to negate a media query ‘not’ operator is used. If the query is returning true then to negate a query. the ‘not’ operator will be used else it will return false. If all queries are present in a comma-separated list of queries then ‘not’ operator will negate a particular query applied. While using the ‘not’ operator, one must also specify the media type.

only
In case entire query matches, then ‘only’ operator is used and this applies only to style. It is also useful for preventing older browsers from applying the selected styles. An older browser could interrupt the query, when not using ‘only’. It will interpret screen and (max-width: 500px) simply, as screen ignoring the remainder of the query. It will apply its styles on all the screens. One should specify the media type while using the ‘only’ operator.

, (comma)
To combine multiple media queries into a single rule, ‘comma’ is used. Each query is treated separately from the others in a comma-separated list. If any of the queries in the list is true, then the entire media statement returns true. You can say that this also behaves like a logical ‘or’ operator.

Breakpoints of media queries

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}