CSS media queries 媒介查询

今天上班无聊的时候突然看见了一个名词,叫做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>

等哪天确实没有办法的时候再用吧,至少现在我还没有用过 哈哈

你可能感兴趣的:(CSS media queries 媒介查询)