@media 讲解

最新推荐文章于 2021-06-19 17:28:04 发布

Mr_lwb

最新推荐文章于 2021-06-19 17:28:04 发布

阅读量573

点赞数 1

本文链接：https://blog.csdn.net/u010881899/article/details/56671547

版权

Css3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

一、媒体

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>

Mr_lwb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
@media 讲解

一、媒体 all 所有媒体braille 盲文触觉设备embossed 盲文打印机print 手持设备projection 打印预览screen 彩屏设备speech '听觉'类似的媒体类型tty 不适用像素的设备tv 电视demo #box{
复制链接

扫一扫

专栏目录