css media媒体查询起什么作用呢?


摘要:
下文讲述css媒体查询的功能简介说明,如下所示:


css media媒体查询功能

media媒体查询可使用在不同的设备及媒体上运行不同的css代码,
如:打印设备,屏幕的大小 ,屏幕的方向
media媒体查询是一个条件,当符合条件时,则运行相应的css代码
例:
pc端:1024分辨率
Pad pro:1024~768分辨率
Pad mini,mobile横屏:768~450分辨率
mobile竖屏:450分辨率


css media媒体查询的举例

当分辨率大于600px的时候,会识别大括号里面的代码

@media all and (min-width:600px){
   #divTest{ background:green;}
}

当分辨率小于600px的时候,会识别大括号里面的代码

@media all and (max-width:500px){
      #divTest{ background:green;}
}
@media all and (min-width:300px) and (max-width:500px){
      #divTest{ background:green;}
}
@media print and (min-width:300px){
      #divTest{ background:skyblue;}
      p{text-decoration: underline;}
}

当分辨率<600px的时候,会识别大括号里面的代码 , not条件反过来

@media not all and (min-width:600px){
       #divTest{ background:green;}
}
@media all and (max-width:1200px){
       #divTest{ background:green;}
}
@media all and (max-width:700px){
       #divTest{ background:green;}
}

当竖屏时,运行下面的css代码

@media all and ( orientation:portrait ){
      #divTest{ background:green;}
}

当横屏时,运行下面的css代码

@media all and ( orientation:landscape ){
        #divTest{ background:green;}
}