CSS3 Media Queries - @ media inquiries

First, the role

　　For different media types, can be used to specify different style rules, i.e. using the corresponding style replace the original style.

Second, grammar

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

　　May comprise one or more expressions, expression returns true or false depending on the conditions are satisfied;

• not mediatype: means the addition of certain equipment, such as @media not print
• only mediatype: meaning specified certain equipment, such as @media only print

　　Mediatype multimedia types are:

• • all: used for all types of multimedia devices
  • print: a printer
  • screen: a computer screen, tablet, smart phone, etc.
  • speech: for screen readers

Third, examples

/ * 
  Max-width: 768px indication pattern on the screen of the visual device 768px window size is less than 
  min-width: 768px indication on the style of the device 768px screen size is larger than the visible window     
* / 
@media and Screen (max -width: 768px) {  
    .signinpanel, .signuppanel { 
        margin : 0 Auto ; 
        width : 420px Important! ; 
        padding : 20px
     } 
}