Media queries allow you to customize the presentation of your web pages for a specific range of devices like mobile, phone, tablets, desktops, etc. without any change in markups.

Syntax

@media Rule

The @media rule is used to apply a different set of styles for different Media/devices through the use of Media Queries.

Parenthesis

We set the condition inside the parenthesis.

If I want the background color to be changed in the smaller screen, I can set the condition inside parenthesis.

Media Types

If we don't apply a media type, the @media rule selects all types of devices by default.

There are many kinds of devices but we can group them into 4 categories:

all - for all media types print - for printers screen - for computer screens, tablets and smart-phones speech - for screen readers that "read" the page out loud

Breakpoints

Breakpoints are points where the website content responds according to the device width.

This is how the code works

when the screen is 992px or less, the background color is changed to blue from red

some common breakpoints for widths of devices:

• 320px-480px: Mobile devices
• 481-768px: iPads, Tablets
• 769px-1024px: Small Screens, Laptops
• 1025px - 1200px: Desktops, Large Screens
• 1201px and more: Extra Large Screens , TV