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)

   		only:
   			 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
   	
   		and:
   			 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.
https://en.qdmana.com/2022/04/202204290809403232.html

Random recommended