@media 讲解

来源：互联网发布：淘宝怎么找代理商编辑：程序博客网时间：2024/06/05 07:12

一、媒体

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 引入

第一种

第二种

</style>

1 0