what is media queries?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 more handy 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 is 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 do we exactly use these queries.                 

                           

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

Media-Type	Description
all	It can be used for all device types like desktop, laptop, mobile phones etc.
print	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.
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 Operators  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.

 

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 off 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 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.

 

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

 
media query breakpoints

Media query break point is basically a min width or max width of device that show when we have a device of min width "X" Or max width "Y" Then show code that we write in media querie break point. 
So here is media query break point of every device.

Javascript project ideas with source code  by Code With Random

media query for mobile devices 

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

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

media query for iPads, Tablets

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

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

media query for Small screens, laptops

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

There is common break point for small screens,laptop media queries between 769px to 1024px.write your all css for small screens,laptop.

HTML - CSS project ideas by Code With Random

media query for Desktops, large screens

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

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

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 screen so we chose a balancing media query break point.

Check it more

calculator Html javascript | calculator javascript code

bootstrap navbar - responsive  bootstrap navbar 

notification CSS style | Html top bar slide down notification CSS

CSS responsive menu | CSS animated Menu

countdown timer HTML javascript | free countdown timer

A Custom checkbox in CSS? | Create a custom checkbox using CSS?

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

Written by Linkedin :Ritika Rastogi

Team Codewith_Random