Basic CSS Media Query Explained

CSS
October 26, 20213 minutesuserPayal Pansuriya
Basic CSS Media Query Explained

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

Syntax

@media Rule

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.

arenthesis

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

breakpoints

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

Our Laravel Products

InfyHMSInfyHMS-SAASInfyJobsInfyChatInfyCareInfyVCards-SaaSInfyInvoicesInfyInvoices-SaaSInfyCalInfyFundingInfyNews

Tags