媒体查询允许开发者根据设备特性如屏幕尺寸、分辨率等应用不同的CSS样式。例如，可以设定当屏幕宽度大于900px时使用某一样式表，小于或等于600px时使用另一样式表。这包括对max-width、min-width、max-height和min-height的条件判断。媒体类型如screen、print和speech也影响样式应用。
不同媒体类型、设备、条件样式应用不同的类型
简单的来说：告诉浏览器或者其他运行环境，满足a条件时，a样式生效；满足b条件时，b样式生效
可达到的效果
- 监听屏幕的高度（vh）和宽度（vw）
- 监听设备的高度与高度
- 监听设备方向（比如手机的竖屏和横屏）
- 监听分辨率（
resolution）等等
使用方法
在css中使用
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
// 自定义样式
}
在html中使用
<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
条件(mediafeature)
当屏幕尺寸不一样时，显示不同的样式，具体有以下4中类型：
- max-width：满足条件的最大可视化宽度，小于此都会显示定义样式
- min-width：满足条件的最小可视化宽度，大于此都会显示定义样式
- max-height：满足条件的最大可视化高度，小于此都会显示定义样式
- min-height：满足条件的最小可视化高度，大于此都会显示定义样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
background-color:lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue; // 淡蓝色
}
}
@media screen and (min-width: 300px){
body {
background-color:darkred; // 深红色
}
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
window.open ('https://www.runoob.com/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
//写成一行
-->
</SCRIPT>
</body>
</html>
结果：
媒体类型(mediatype)
@media 可以针对不同的媒体类型设置不同的样式，具体有以下几种：
- all：所有多媒体类型设备
- print：打印机和打印机预览
- screen：电脑屏幕、手机、平板等等
- speech：屏幕阅读器
常用关键字
not，and和only可用于联合构造复杂的媒体查询，使用, 分隔多个媒体查询，讲他们组合成一个规则
not
排除的媒体查询
only
只满足的媒体查询
// 【屏幕】生效样式
@media screen and (max-width: 300px) {
body {
background-color:lightblue; // 淡蓝色
}
}
// 【打印机设备】生效样式
@media only print and (min-width: 300px){
body {
background-color:darkred; // 深红色
}
}
结果：
and
接多个媒体查询规则
逗号（,）
可满足的多个媒体查询，类似于or
@media print, screen and (min-width: 300px){
body {
background-color:darkorange; // 深橙色
}
}
结果：
注意：对于媒体类型（Media types），一般会默认all类型，比如：
// 默认【所有设备-all】生效样式
@media (min-width: 300px){
body {
background-color: darkgreen; // 深绿色
}
}
扫一扫
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
