@media媒体查询方式

最新推荐文章于 2024-06-19 23:47:23 发布

茶一蛊

最新推荐文章于 2024-06-19 23:47:23 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/qq_26905813/article/details/126685750

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

@media媒体查询方式

什么是媒体查询？
为不同尺寸的屏幕设定不同的css。主要是针对宽度。

1. @media常用参数
在这里插入图片描述

2. 参数示例~device-width（设备宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div0{
				width: 150px;
				height: 200px;
			}
			/*
			 screen  代表是屏幕显示（用此区分是屏幕展示还是打印）
			 * */
			@media screen and (min-device-width: 100px) and (max-device-width: 300px) {
				#div0{
					background-color: red;
				}
			}
			@media screen and (min-device-width: 301px) and (max-device-width: 500px) {
				#div0{
					background-color: blue;
				}
			}			
		</style>
	</head>
	<body>
		<div id="div0"></div>
	</body>
</html>

设备宽度在100px~300px时，为div0设置背景色红色；
设备宽度在301px~500px时，为div0设置背景色蓝色。
在这里插入图片描述

3. 参数示例~width（浏览器宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
			}
			/*
			 screen  （用于区分是屏幕显示还是打印）
			 min-width  代表浏览器宽度
			 * */
			@media screen and (min-width: 1200px) and (max-width: 1600px) {
				#div1{
					background-color: pink;
				}
			}
			@media screen and (min-width: 1601px) {
				#div1{
					background-color: darkblue;
				}
			}		
						
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述

4. 媒体查询的几种引入方式

写在style标签中，符合哪个条件，运行哪个内部样式表
写在link标签中，符合哪个条件，运行哪个外部样式表。

在这里插入图片描述

写在style样式表中，符合哪个条件，运行哪段代码

在这里插入图片描述
5. 一个简单的小实例，根据设备宽度决定每行展示几个盒子

<!DOCTYPE html>
<html>

	<head>
		<!--
			根据装置的大小，来决定一行显示一个，两个，还是三个盒子
		-->
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div0 {
				width: 100%;
			}
			/*id为'div0'下的第一个div*/			
			#div0 div:nth-child(1) {
				height: 200px;
				background-color: aqua;
			}
			/*id为'div0'下的第二个div*/			
			#div0 div:nth-child(2) {
				height: 200px;
				background-color: mediumvioletred;
			}
			/*id为'div0'下的第三个div*/
			#div0 div:nth-child(3) {
				height: 200px;
				background-color: greenyellow;
			}
			/*
			 min-device-width  代表设备宽度
			 * */
			@media screen and (min-device-width: 1000px) {
				#div0 div {
					width: 33.3%;
					float: left;
				}
			}			
			@media screen and (min-device-width: 501px) and (max-device-width: 1000px) {
				#div0 div {
					width: 50%;
					float: left;
				}
			}			
			@media screen and (max-device-width: 500px) {
				#div0 div {
					width: 100%;
					float: left;
				}
			}
		</style>
	</head>

	<body>
		<div id="div0">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

</html>