CSS3多媒体查询—@media查询

一、作用

　　针对不同的多媒体类型，可指定使用不同的样式规则，即使用对应的样式替代原有的样式。

二、语法

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

　　可以包含一个或者多个表达式，表达式根据条件是否成立返回true或者false；

• not mediatype：意思是除了某些设备，比如@media not print
• only mediatype：意思是指定某种设备，比如@media only print

　　多媒体类型mediatype有：

• • all：用于所有多媒体类型设备
  • print：用于打印机
  • screen：用于电脑屏幕、平板、智能手机等
  • speech：用于屏幕阅读器

三、实例

/*
  max-width:768px 表示在屏幕可视窗口尺寸小于768px的设备上使用以下样式
  min-width:768px 表示在屏幕可视窗口尺寸大于768px的设备上使用以下样式    
*/
@media screen and (max-width:768px) { 
    .signinpanel,.signuppanel {
        margin: 0 auto;
        width: 420px!important;
        padding: 20px
    }
}