css3 media媒体查询

css3 media媒体查询

@media媒体查询 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media媒体查询是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

一、语法

  • 
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    
    		
  • 二、mediatype媒体类型

    描述
    all 用于所有设备
    print 用于打印机和打印预览
    screen 用于电脑屏幕,平板电脑,智能手机等。
    speech 应用于屏幕阅读器等发声设备

    三、关键字 not 、only

    1、only:用来指定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

    2、not:not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)

    3、and:连接词

    四、media feature设备特性值

    描述
    aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
    color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
    color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
    device-height 定义输出设备的屏幕可见高度。
    device-width 定义输出设备的屏幕可见宽度。
    grid 用来查询输出设备是否使用栅格或点阵。
    height 定义输出设备中的页面可见区域高度。
    max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-color 定义输出设备每一组彩色原件的最大个数。
    max-color-index 定义在输出设备的彩色查询表中的最大条目数。
    max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
    max-device-height 定义输出设备的屏幕可见的最大高度。
    max-device-width 定义输出设备的屏幕最大可见宽度。
    max-height 定义输出设备中的页面最大可见区域高度。
    max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
    max-resolution 定义设备的最大分辨率。
    max-width 定义输出设备中的页面最大可见区域宽度。
    min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
    min-color 定义输出设备每一组彩色原件的最小个数。
    min-color-index 定义在输出设备的彩色查询表中的最小条目数。
    min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
    min-device-width 定义输出设备的屏幕最小可见宽度。
    min-device-height 定义输出设备的屏幕的最小可见高度。
    min-height 定义输出设备中的页面最小可见区域高度。
    min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
    min-resolution 定义设备的最小分辨率。
    min-width 定义输出设备中的页面最小可见区域宽度。
    monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
    resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
    scan 定义电视类设备的扫描工序。
    width 定义输出设备中的页面可见区域宽度。

    五、css3 media媒体查询实例

    1、当页面小于960px的时候执行它下面的CSS

  •  
  • 
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    
    		
  • 2、等于960px尺寸的时候执行它下面的CSS

  •  
  •  
  • 
    @media screen and (max-device-width:960px){
        body{
            background:red;
        }
    }
    
    		
  • 3、大于960px尺寸的时候执行它下面的CSS

  •  
  • 
    @media screen and (min-width:960px){
        body{
            background:orange;
        }
    }
    
    		
  • 4、当页面宽度大于960px小于1200px的时候执行下面的CSS

  •  
  •  
  • 
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    
    		
  • 标签: