Welcome Back😄😄 !! Suppose you are a first-time visitor Welcome! First and foremost, let’s begin today with an interesting article. 🚀🚀

I hope you are ready now with your pen and paper to walk through the knowledge transfer in Media query👩‍💻..

LET US BEGIN WITH THE INTRODUCTION 📚

Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries. Media rules were introduced in CSS2 and were used to define different styles for different media types. For example, you would have one set of style rules for your computer screens, one set of rules for handheld devices, etc.

What is Media Queries?

Unlike media rules, media queries do not use the device type as an indicator to define style rules. Instead, media queries look at the capabilities of the device. Media queries are used when you want to modify your webpage or app depending on specific characteristics and parameters.

Media queries can be used to check:

1. width and height of the viewport

2. width and height of the device

3. orientation (landscape/ portrait)

4. resolution

Syntax of Media Query:

• A media query comprises a media type (optional) and can contain one or more expressions, which resolve to be either true or false.
• Media queries are case-insensitive.
• @media not|only mediatype and (expression){ css-code; }

  Media Query Parts

• A media query consists of 3 Parts: the Media Type, an Expression, and the Style Rules contained within the media query itself.

The Media Type

• allows us to declare what type of of media the rules should be applied to. There are four options you can declare: all, print, screen, and speech.
• Example: screen

Expressions

• allow you to further target devices based on specific conditions you pass to the media query. Expressions test media features, which describe different features of a device, such as width and height.

• Example: min-width: 800px

  • CSS Style Rules can be be listed inside the media query’s curly braces.

Take a 5 minute break and keep reading!!!!

Media type

• The media type is used to describe the type of device that a browser is running on. There used to be loads, but the level 4 specification deprecated a whole lot that were never implemented anyway, leaving us with 3 we should care about:

i. all

ii. screen

iii. print

All

As mentioned earlier, if you don't specify a media type, it will default to "all", which means the css will apply to all devices.

Screen

• Probably what you're reading this article on now!
• Example:

@media screen{
  body {
    background: rebeccapurple;
  }
}

Print

• For when you print a page, or any "paged" media.
• syntax:

  @media print {
  /* styles for print media only */
  }
  

  Calling Media Queries

1 here are two ways to call a media query:

2 using an external stylesheet, or writing directly inside a stylesheet.

3 The syntax of a media query is the same no matter if you use it inside a link element, after an @import instruction, or inside a CSS stylesheet.

Breakpoints

• We can add breakpoints so that certain parts of our design will behave differently on each side of the breakpoint.
• Common breakpoints include the 320px (for smartphones), 768px (for tablets), and 1024px (for desktop monitors).
• Unfortunately, there’s no defined standard for the page widths to target, but the following example responsive values are often used:
• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Complex Expressions

You can compose complex media queries using logical operators, including not, and, and only. You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. (This is equivalent to an or operator.)

1 AND (and keyword)

• The AND operator is the one you’ll probably use the most.
• It is used for combining multiple media features together into a single media query.
• It requires that all conditions specified must be met before the styling rules will take effect.

• Media query example containing the AND operator:

@media (min-width:800px) and (max-width:1200px) { … }

2 Not (Logical Operator)

• You can use the not logical operator at the beginning of a query to toggle the truthiness of the whole query.
• The not operator is useful to apply styles when certain conditions are not met by the browser or device.
• In the following example, the media query will apply when the primary pointing device can’t hover on elements:

• Syntax: @media not screen and (hover: hover) { /* ... */ }

  3 Only (Logical Operator)

• The only logical operator is a little bit special and hides the entire query for older browsers.

• In other words, older browsers don’t understand the only keyword so the entire media query is ignored.
• Otherwise only has not effect:
• syntax:

@media only all and (min-width: 320px) and (max-width: 480px) { /* ignored by older browsers */ }

My article ends here, I hope you all liked it. ❤️‍🔥

Any suggestions on how I can improve are welcome!

If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.👏👏