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.
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.
Team Codewith_Random
Post a Comment