What is Media Queries ? 5 Common Media Query Breakpoints

 

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.

Syntax of Media-Queries

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

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:-

1. The Media Query Declaration

2. Specifying the Media type

3. The condition

4. The CSS properties

Different media types are:-

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;
}
}

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

@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;
}
}

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