CSS media queries 媒介查询

最新推荐文章于 2024-11-10 13:17:33 发布

d945332077

最新推荐文章于 2024-11-10 13:17:33 发布

阅读量1.8k

点赞数

分类专栏：个人总结文章标签： css opera 浏览器 xhtml safari chrome

本文链接：https://blog.csdn.net/d945332077/article/details/7692667

版权

个人总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天上班无聊的时候突然看见了一个名词，叫做media queries（媒介查询），开始还确实不知道是干什么的，后来才发现是根据写不同的样式表来适应不同的设备。呵呵，还比较可以，但是感觉好麻烦哦，这么多设备。

Media Types 媒体类型	CSS Version 版本	Compatibility 兼容性	Description 简介
all	CSS2	所有浏览器	用于所有媒体设备类型
aural	CSS2	Opera	用于语音和音乐合成器
braille	CSS2	Opera	用于触觉反馈设备
handheld	CSS2	Chrome,Safari,Opera	用于小型或手持设备
print	CSS2	所有浏览器	用于打印机
projection	CSS2	Opera	用于投影图像，如幻灯片
screen	CSS2	所有浏览器	用于计算机显示器
tty	CSS2	Opera	用于使用固定间距字符格的设备。如电传打字机和终端
tv	CSS2	Opera	用于电视类设备
embossed	CSS2	Opera	用于凸点字符（盲文）印刷设备

一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media queries</title>
</head>
<style>
div.example{background-color: #cee;}

@media all and (min-width: 640px) {
div.example {
background-color: green;
}
}
@media screen and (max-width: 1100px) {
div.example {
background-color: red;
}
}
</style>
<body>
<div class="example">
这是一个背景色例子 -_-!!!
</div>
</body>
</html>