一.media query 介绍
1.使用 @media 查询可以针对不同的媒体类型定义不同的样式。
2.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面。
3.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
二.兼容性
三.media query 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype(媒体类型)说明
媒体类型 | 兼容性 | 描述 |
---|---|---|
aural | 已废弃,用于语音和音乐合成器 | |
braille | 已废弃,用于触觉反馈设备 | |
handheld | 已废弃,用于小型或手持设备 | |
print | 所有浏览器 | 用于打印机和打印预览 |
projection | 已废弃,用于投影图像,如幻灯片 | |
screen | 所有浏览器 | 用于电脑屏幕,平板电脑,智能手机等 |
tty | 已废弃,用于使用固定间距字符格的设备。如电传打字机和终端 | |
tv | 已废弃,用于电视类设备 | |
embossed | 已废弃,用于凸点字符(盲文)印刷设备 | |
speech | 用于语音类型 | |
all | 所有浏览器 | 用于所有媒体设备类型 |
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 | 定义输出设备中的页面可见区域宽度。 |
四.media query 用法及场景
媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中
1、在head中引入
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.min.js "></script>
<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=device-dpi" />
<title>test</title>
</head>
<body>
<div class='test'></div>
<div class='test1'></div>
<div class='test2'></div>
</body>
</html>
上面表示屏幕宽度小于等于600px时,使用example.css渲染web页面
2、在@import中引入
<style type="text/css" media="screen and
(min-width:600px) and (max-width:900px)
">
@import url("css/style.css");
</style>
上面表示屏幕大小在600-900之间时,使用style.css来渲染页面
3直接在css中使用
@media screen and (max-width: 800px) {
.test {
width:100%;
}
.test2 {
width:100%;
}
.test3 {
width:100%;
height:100%;
}
}
设备屏幕输出宽度
最大设备宽度max-device-width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,注意:这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说上面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。
优点:
针对不同的终端(pc,手机,平板,androidTV以及主流浏览器),界面友好,以达到多平台使用共一个页面的响应。
缺点:
需要适配多种设备,css代码繁多。