css3 -- 媒体查询

Posted 2020-07-11 zhanghuiyun

媒体查询：

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

 

2、语法

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

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

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

@import指令调用

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

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

1 @media logic media and (expression){
2       rules  
3 }

 

3、媒体特征

@样式

1 @media screen (min-width:400px){
2       h1{
3            background:
4       }
5 }

@设备宽度以及高度

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

@方向

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

@高宽比

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

@像素比

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