@media 讲解

2024-05-24 08:18

文章标签 讲解 media

本文主要是介绍@media 讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、媒体

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;
}
}