CSS Media Queries

CSS Media Queries

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.