CSS Media Queries are used to define different styles rules for different screen sizes.
like-laptop,mobiles,Desktops,smart watches etc.
Media Queries Syntax:-
@media only screen and (screen size){
code...
}
Value
all -- used for all media type devices
print -- used for printers
screen -- used for computer screens,tablets,smart phones etc
speech -- used for screen readers that read the page out lood.
if you use “only” then that media query will apply only on that value.
if you don’t write “only” then that media query will apply on all the values.
max-width:-
if you apply max-width like
@media only screen and (max-width:700px){
code…..
}
then this media query will apply from 0 to 700px width after 700px width it would not applied.
min-width:-
@media only screen and (min-width:600px){
code….
}
This media query starts applying after 600px width and till the end of screen size.