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}