current position:Home>CSS3 media query

CSS3 media query

2022-04-29 08:09:44Chen Chen is trying

css3 Media query

css3 Media query is the core of responsive solutions 

Media type

   all                   All media ( The default value is )
   screen            Color screen 
   print               Print preview 
   projection      Handheld devices 
   tv                    TV 
   braille            Braille tactile device 
   embossed      Braille Printer 
   speech        “ auditory ” Similar media devices 
   tty                  Devices not suitable for pixels 

Media properties

width			    Viewport width ( coca max min Prefix )
height			    Viewport height ( coca max min Prefix )
device-width	    Equipment size ( coca max min Prefix )
device-pixel-ratio Pixel ratio ( coca max min Prefix , Need to add webkit Prefix )
orientation   portrait Vertical screen 
			  landscape Horizontal screen 

The operator , keyword (only,and,(,or),not)

   			 Prevent old browsers    Queries with media attributes are not supported and are applied to the given style .
   			@media only screen and (min-width:800px ){
   								 The rules ;
   								 The rules 
   			@media  screen and (min-width:800px ){
   								 The rules ;
   								 The rules 
   			 Under the old browser 
   				@media only    --->     Because no only This kind of equipment   Rule ignored 
   				@media screen --->    Because there is screen This device and old browsers ignore queries with media properties 
   			 It is suggested to write in every expression media query Take with you only
   			 Connect media properties  、 Connection media type 
   			 All connection options must be matched successfully before the rule can be applied 
   		or(,) :  and and be similar 
   			 For all connection options, as long as the matching is successful, the rule can be applied 
   		not: Take the opposite 

copyright notice
author[Chen Chen is trying],Please bring the original link to reprint, thank you.

Random recommended