css3 -- 媒体查询

媒体查询：

1、媒体查询优点：基于设备的属性检测设备，这样一来就不需要使用浏览器探测脚本，之后允许直接安装设备的功能去设定目标样式表，也就是说检测用户使用小屏幕的设备，css规则就会调整以适应该屏幕的尺寸，从屏幕上去除无关元素，提供更小的图片，让文本变得更加清晰

 

2、语法

@link元素调用,多种媒体选择中间用逗号隔开

<link href="" rel="stylesheet" media="logic media and (expression)" >

<link href="" rel="stylesheet" media="srceen,projection" >

@import指令调用

@import url("file") logic media and (expression)

@在样式表中或style元素中添加

@media logic media and (expression){
      rules  
}

 

3、媒体特征

@样式

@media screen (min-width:400px){
      h1{
           background:
      }
}

@设备宽度以及高度

@media media and (device-width:1024px) {rules}
@media media and (max-device-width:1024px) {rules}
@media media and (min-device-width:1024px) {rules}

@方向

@media media and (orientation:landscape/portrait){rules}

@高宽比

@media media and (aspect-ratio:horizontal/vertical){rules}
@media media and (device-aspect-ratio:horizontal/vertical){rules}

@像素比

@media media and (-webkit-device-pixel-ratio : number){rules}
@media media and (-moz-device-pixel-ratio : number){rules}
@media media and (max--moz-device-pixel-ratio : number){rules}
@media media and (min--moz-device-pixel-ratio : number){rules}