media媒体查询

最新推荐文章于 2024-05-16 15:11:52 发布

spfLinux

最新推荐文章于 2024-05-16 15:11:52 发布

阅读量428

点赞数 1

分类专栏： css 移动web 文章标签： css media 媒体查询

css 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

移动web

15 篇文章 0 订阅

订阅专栏

1、根据不同的浏览设备加载不同的css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link media="screen" rel="stylesheet" href="css/screen.css">
	<link media="print" rel="stylesheet" href="css/print.css">
</head>
<body>
	<h1>hello world</h1>
	<div class="box">
		<h1>根据不同的浏览设备加载不同的css</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iusto possimus aspernatur totam laboriosam quis velit sunt atque ducimus maxime quia reprehenderit.</p>
	</div>
</body>
</html>

screen.css

body{
	font-size: 12px;
}
.box{
	font-size: 14px;
	color: #FFF;
	background: green;
}

print.css

body{
	font-size: 12px;
}
.box{
	font-size: 19px;
	color: #FFF;
	background: red;
}

效果：

（1）浏览器界面下：

（2）打印机下：

------------------------------------------------------------------------

2、根据屏幕尺寸不同，加载不同CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link media="screen and (min-width:992px)" rel="stylesheet" href="css/screen_pc.css">
	<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/screen_pad.css">
	<link media="screen and (max-width:767px)" rel="stylesheet" href="css/screen_phone.css">
</head>
<body>
	<h1>hello world</h1>
	<div class="box">
		<h1>根据屏幕尺寸不同，加载不同CSS文件</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iusto possimus aspernatur totam laboriosam quis velit sunt atque ducimus maxime quia reprehenderit.</p>
	</div>
</body>
</html>

screen_pc.css:

.box{
	font-size: 23px;
	color: pink;
	background: green;
}

screen_pad.css:

.box{
	font-size: 16px;
	color: #FFF;
	background: #000;
}

screen_phone.css:

.box{
	font-size: 12px;
	color: orange;
	background: #FFF;
}

-------------------------------------------------------------

3、根据屏幕尺寸不同，加载不同CSS片段

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/screens.css">
</head>
<body>
	<h1>hello world</h1>
	<div class="box">
		<h1>根据屏幕尺寸不同，加载不同CSS片段</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iusto possimus aspernatur totam laboriosam quis velit sunt atque ducimus maxime quia reprehenderit.</p>
	</div>
</body>
</html>

screens.css

/* pc */
@media screen and (min-width: 992px){
	.box{
		font-size: 23px;
		color: pink;
		background: green;
	}
	h1{font-size: 2em}
}
/* pad */
@media screen and (min-width: 768px) and (max-width: 991px){
	.box{
		font-size: 16px;
		color: #FFF;
		background: #000;
	}
	h1{font-size: 1em}
}
/* phone */
@media screen and (max-width: 767px){
	.box{
		font-size: 12px;
		color: orange;
		background: #FFF;
	}
	h1{font-size: 0.5em}
}

spfLinux

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
media媒体查询

1、根据不同的浏览设备加载不同的css Document hello world 根据不同的浏览设备加载不同的css Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iu
复制链接

扫一扫