媒体查询
概念
媒体查询就是针对不同的终端 (PC端、iPad端和移动端),在使相同的 HTML结构的前提下,利用 CSS 的媒体查询来为不同的终端调用不同的CSS样式,从而在不同的终端中,都能呈现出不同的UI界面效果。
并且在使用媒体查询时,可以针对不同的媒体类型定义不同的样式。
综上:@media
可以针对不同的屏幕尺寸设置不同的样式,特别是在需要设计响应式页面时,@media
是非常有用的。
当每次调整浏览器大小的过程中,页面也会根据浏览器的宽高来重新渲染页面。
在 IE8及以下都不兼容
语法
:
@media not|only mediatype and (mediafeature1 and|or|not mediafeature2) {
CSS-Code;
}
-
not/only/and
:逻辑运算符 (括号外面的)
-
mediatype
:媒体类型
-
mediafeature
:媒体功能
逻辑运算符:
-
not
:否定,在 @media
后,不满足则返回 true
,否则返回 false
。
-
only
:仅仅,在 @media
后。
-
and
:连接多个媒体查询规则组合成 单条媒体查询,在 mediatype
后。
-
or
:或者。
-
,
:将多个媒体查询合并为一个规则。
/* 小于宽高为 600px 时 隐藏div */
@media screen and ((max-width: 600px), (max-height:300px)){
div{display: none;}
}
@media screen and (max-width: 600px) and (max-height:300px){
div{display: none;}
}
@media screen and (max-width: 600px) or (max-height:300px){
div{display: none;}
}
/* 下于宽为 600px 时 隐藏div,不关高的事 */
@media screen and (max-width: 600px) not (max-height:300px){
div{display: none;}
}
媒体类型 (mediaType):
-
all
:匹配所有设备
-
print
:用于打印机
-
screen
:用于屏幕
-
speech
:用于语音合成器 (比如屏幕阅读器)
以下的媒体类型都已经被废弃了,但浏览器还是能够识别:
-
aural
:用于语音和音频合成器,被 speech
替代
-
braille
:用于盲人用点字法触觉回馈设备
-
embossed
:用于分页的盲人用点字法打印机
-
handheld
:用于小的手持的设备
-
projection
:用于方案展示,比如幻灯片
-
tty
:用于使用固定密度字母栅格的媒体,比如电传打字机和终端
-
tv
:用于电视机类型的设备
媒体功能 (mediafeature):
-
width
:定义输出设备中的页面可见区域宽度
。
-
height
:定义输出设备中的页面可见区域高度
。
-
max-width
:最大可见区域宽度。
-
min-width
:最小可见区域宽度。
-
min-height
:最小可见区域高度。
-
max-height
:最大可见区域高度。
-
color
:定义输出设备每一组彩色原件的个数
,若不是彩色设备,值为0。
-
min-color
:定义输出设备每一组彩色原件的最小个数。
-
max-color
:定义输出设备每一组彩色原件的最大个数。
-
color-index
:定义输出设备中彩色查询表中的条目数
,未使用彩色查询表,值为0。
-
min-color-index
:定义输出设备中彩色查询表中的最小条目数。
-
max-color-index
:定义输出设备中彩色查询表中的最大条目数。
-
aspect-ratio
:定义输出设备中的页面可见区域宽度与高度
的比率。
-
min-aspect-ratio
:定义输出设备中的页面可见区域宽度与高度的最小比率。
-
max-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最大比率。
-
device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度
的比率。
-
min-device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最小比率。
-
max-device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最大比率。
-
device-width
:定义输出设备的屏幕可见宽度
。
-
device-height
:定义输出设备的屏幕可见高度
。
-
min-device-width
:定义输出设备的屏幕最小可见宽度。
-
min-device-height
:定义输出设备的屏幕的最小可见高度。
-
max-device-width
:定义输出设备的屏幕最大可见宽度。
-
max-device-height
:定义输出设备的屏幕可见的最大高度。
-
resolution
:定义设备的分辨率
。如:96dpi, 300dpi, 118dpcm。
-
min-resolution
:定义设备的最小分辨率。
-
max-resolution
:定义设备的最大分辨率。
-
monochrome
:定义在一个单色框架缓冲区中每像素包含的单色原件个数
。如果不是单色设备,则值等于0。
-
min-monochrome
:定义在一个单色框架缓冲区中每像素包含的最小单色原件个数。
-
max-monochrome
:定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
-
orientation
:定义输出设备中的页面可见区域高度
是否大于或等于宽度
。
-
portrait
:竖屏,屏幕视窗高度大于宽度。
-
landscape
:横屏,屏幕视窗宽度大于高度。
-
scan
:定义电视类设备的扫描工序。
-
grid
:查询输出设备是否使用栅格或点阵。
举例
<!-- 宽度大于 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">
单个使用
/* 在屏幕可视窗口尺寸 小于480 像素的设备上修改背景颜色 */
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
/* 屏幕可视窗口尺寸 小于600 像素时将 div 元素隐藏 */
@media screen and (max-width: 600px) {
div {
display: none;
}
}
用min-width时,小的在上面,大的在下面
/* 小设备 (平板电脑和大型手机) */
@media only screen and (min-width: 600px) {
body {background: green;}
}
/* 中型设备(平板电脑) */
@media only screen and (min-width: 768px) {
body {background: blue;}
}
/* 大型设备(笔记本电脑/台式机) */
@media only screen and (min-width: 992px) {
body {background: orange;}
}
/* 超大型设备(大型笔记本电脑和台式机) */
@media only screen and (min-width: 1200px) {
body {background: pink;}
}
用max-width时,大的在上面,小的在下面
/* 992px-1200px */
@media (max-width: 1200px) {
body {background-color: pink;}
}
/* 768px-992px */
@media (max-width: 992px) {
body {background-color: orange;}
}
/* 600px-768px */
@media (max-width: 768px) {
body {background-color: blue;}
}
/* <=600px */
@media (max-width: 600px) {
body {background-color: green;}
}
同时使用 min-width 和 max-width
/* <=600px */
@media (max-width: 600px) {
body {background: green;}
}
/* 601px-992px */
@media (min-width: 601px) and (max-width: 992px) {
body {background: blue;}
}
/* 993px-1200px */
@media (min-width: 993px) and (max-width: 1200px) {
body {background: orange;}
}
/* >=1201px */
@media (min-width: 1201px) {
body {background: pink;}
}