all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
@media embossed{
/*盲文打印机是绿色*/
#box{
background-color:green;
}
}
@media tv{
/*在tv上是粉色*/
#box{
background-color:pink;
}
}
@media all{
/*在所有媒体上是红色*/
#box{
background-color:red;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
二、关键字
and : 连接
@media all and (min-width:1000px)
only : 某种特定的媒体类型
@media only screen
not : 关键是用来排除某种特定的媒体类型
@media not tv
/*@media only 设备类型 只有在某种特定的设备上 识别*/
/* @media only screen{
仅仅在彩屏设备下识别
#demo{
background:blue;
}
}
*/
/*当屏幕大于等于500像素的时候*/
/* @media all and (min-width:500px){
#demo{
background:green;
}
} */
/*当屏幕小于等于500像素的时候*/
@media all and (max-width:900px){
#demo{
background:yellow;
}
}
三、横屏、竖屏
提示:这只是初步的监测,但不是最好的,后期有讲解最新的
/*竖屏*/
@media (orientation:portrait){
div{
background:yellow;
}
}
/*横屏*/
@media (orientation:landscape){
div{
background:blue;
}
}
四、css 引入
第一种
<link rel="stylesheet" type="text/css" href="a1.css" media="all and (min-width:400px)" />
<link rel="stylesheet" type="text/css" href="a2.css" media="all and (min-width:600px)" />
第二种
<style type="text/css">
@import url(a1.css) (min-width:400px);
@import url(a2.css) (min-width:600px);
</style>