CSS Media Queries
/ / Learn CSS Media Queries in 5 minutes
Design | CSS

Learn CSS Media Queries in 5 minutes

Share With Love

What is CSS Media Queries

What is CSS Media Queries?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

what is css media

Media queries allow you to define style rules for different media types.

They are fundamental part of RWD (Responsive Web Design) & are used to customize the appearance of website for various devices.

Media quarries are useful when you want to modify your app ‘s appearance depending on device’s type or specific characteristics and parameters .

How to Use media query?

css exampls

A media query consists of media type and can contain one or more expressions, which resolve to either true or false. when media quarry is true, the corresponding style rules are applied.

Need a responsive website ? click here

Media types describe the general category of a device.

  • all:: all media types devices
  • print :: printers
  • screen:: PCs, tablets, smartphones
  • speech:: speech synthesizers

Basic Example

This example changes the background-color to coral if the viewport is 500 pixels wide or wider (if the viewport is less than 500 pixels, the background-color will be the default white color).


Media features describe specific characteristics of the user agent, output device, or environment. some of them are:

width, height, min-height, min-width, max-width, max-height, resolution, update, orientation, color, aspect-ratio, pointer, etc

Share With Love

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *