ADVERTISEMENT

What is Media Queries ? 5 Common Media Query Breakpoints

Telegram Group Join Now

ADVERTISEMENT

What is Media Queries ? 5 Common Media Query Breakpoints

What is Media Queries ? 5 Common Media Query Breakpoints
What is Media Queries ? 5 Common Media Query Breakpoints

 

ADVERTISEMENT

ADVERTISEMENT

Websites were initially made only for devices like computers and laptops. But, now as other devices like mobile phones, tablets, etc. have become handier for people, websites also now have to be designed according to these devices. Because of this, what we call ‚Äúresponsive websites‚ÄĚ came into practice. Responsive websites help to get the best user experience. Because of this, CSS media queries were put into effect.

Media queries are a feature of CSS3. It helps us to target CSS rules based on device orientation, display density, and screen- size. Thus, CSS media queries help us to customize our webpage according to the requirement of different presentation mediums.

ADVERTISEMENT

Syntax of Media-Queries

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

ADVERTISEMENT

Let’s dive deeper into how we exactly use these queries.

Portfolio Website using HTML and CSS (Source Code)

@media screen and (max-width:500px)
{                                        
  div{CSS properties that has to be applied}
}

Thus, we can divide the syntax into four parts:-

ADVERTISEMENT

1. The Media Query Declaration

2. Specifying the Media type

3. The condition

ADVERTISEMENT

4. The CSS properties

ADVERTISEMENT

Different media types are:-

 

Media-Type

                Description

all

ADVERTISEMENT

It can be used for all device types like desktop, laptop, mobile phones etc.

ADVERTISEMENT

 

ADVERTISEMENT

print

ADVERTISEMENT

This can be used for printing a certain page.We can view this style by going to the print preview screen.This can prevent user’s from printing all the pages that they probably don’t need.

ADVERTISEMENT

 

screens

It is intended primarily for screens.

 

speech

It is intended for speech synthesizers.CSS2 had a similar media type called aural for this purpose.

 

Logical Operator’s media query

Now, as the media queries execute only when a certain condition is true therefore media queries can be implemented with the use of logical operators like and, or, not, and only. Multiple queries can be executed in a single rule by separating them with commas.

50+ HTML, CSS & JavaScript Projects With Source Code

1. and-This operator is used to combine multiple media queries into a single rule. It is true only when all the individual media queries are true.

2. or-Operator also combines multiple media queries into a single rule but it can be true even if one individual media query is true.
3. not- This operator negates the result of the media query. For example- if the media query returns true, then, the result would be false, because not operator negates the result.

4. only-This the operator executes the CSS properties under it only when the entire specified media query matches.It also helps older browsers from executing the specified styles.

Create A Travel Website Using HTML & CSS

Commas(,) can also be used to combine multiple media queries into a single rule.


media query breakpoints

The media query breakpoint is basically the min-width or max width of the device that shows when we have a device of min-width “X” Or max-width “Y” and Then shows the code that we write in the media queries break point.
So here is the media query break point of every device.

media query for mobile devices 

@media screen and (min-width: 320px) and (max-width: 480px) {
body{
height: 100vh;
width: 100vw;
}
}

There is a common break point for mobile devices’ media queries between 320px to 420px. write your all css for mobile devices.

Weather App Using Html,Css And JavaScript 

media query for iPads, Tablets

@media screen and (min-width: 481px) and (max-width: 768px) {
body{
height: 100vh;
width: 100vw;
}
}

There is a common break point for ipads, and tablets media queries between 481px to 768px. write your all css for ipads, and tablets.

media query for Small screens, laptops

@media screen and (min-width: 769px) and (max-width: 1024px) {
body{
height: 100vh;
width: 100vw;
}
}

There is a common breakpoint for small screens, laptop media queries between 769px to 1024px. write your all css for small screens and laptops.

media query for Desktops, large screens

@media screen and (min-width: 1025px) and (max-width: 1200px) {
body{
height: 100vh;
width: 100vw;
}
}

There is a common breakpoint for Desktop, larger screen media queries between 1024px to 1200px. write your all css for a small Desktop or larger screen.

How To Create Movie App UI Using HTML & CSS

media query for Extra large screens, TV

@media screen and (min-width: 1201px) and (max-width: 1800px) {
body{
height: 100vh;
width: 100vw;
}
}

We write 1201px to 1800px because there in no limit or breakpoint for larger TV screens so we chose a balancing media query break point.

Hope you like this post and enjoy it. If we did any mistake please comment on it so this help full for also our users. Thank you for reading.

Written by  :Ritika Rastogi
Team Codewith_Random

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT