响应式——媒体查询

HHppGo

已于 2022-06-29 13:09:36 修改

阅读量373

点赞数

分类专栏：移动Web开发文章标签：媒体 css 前端

于 2022-06-29 13:04:11 首次发布

本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文链接：https://blog.csdn.net/asacmxjc/article/details/125516522

版权

移动Web开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

上个bilibili页面出现的问题总结：

元素显示层级：

标准流< 浮动 < 定位
标准流的元素在页面最底部
定位的元素在页面的最上面

注意：header 做了固定定位，在最上层；

之所以出现穿透效果，是因为header没有设置背景色

定位元素的显示层级：

定位过的元素显示层级一样
但是，HTML写在后面的定位元素的层级高于前面的
可以在前面元素的样式中添加z-index: 1;使之层级高于后面的（数字只要大于0即可）

媒体查询-基本语法

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 视口宽度小于等于768px， 网页背景色是粉色 */
		@media (max-width: 768px) {
			body {
				background-color: pink;
			}
		}

		/* 视口宽度大于等于1200px， 网页背景色是skyblue */
		@media (min-width: 1200px) {
			body {
				background-color: skyblue;
			}
		}
	</style>
</head>

<body>

</body>

</html>

媒体查询-书写顺序

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*
			视口宽度 >= 768px，网页背景色是 粉色
			视口宽度 >= 992px，网页背景色是 绿色
			视口宽度 >= 1200px，网页背景色是 skyblue
		*/
		/* 提示: 代码规范    
		mid-width: 从小到大写
		max-width: 从大到小写
		 */
		/* 代码不规范，女朋友两行泪~~（需要改Bug,没时间陪） */
		@media (min-width: 768px) {
			body {
				background-color: pink;
			}
		}

		@media (min-width: 992px) {
			body {
				background-color: green;
			}
		}

		@media (min-width: 1200px) {
			body {
				background-color: skyblue;
			}
		}
	</style>
</head>

<body>

</body>

</html>

媒体查询-link引入

one.css是关于>=992px的样式
two.css是关于>=1200px的样式

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 视口宽度 >= 992px，网页背景色为粉色 one.css-->
	<link rel="stylesheet" href="./one.css" media="(min-width:992px)">
	<!-- 视口宽度 >= 1200px，网页背景色为绿色 two.css-->
	<link rel="stylesheet" href="./two.css" media="(min-width:1200px)">


</head>

<body>

</body>

</html>

媒体查询-隐藏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			/* 1.flex布局 */
			display: flex;
			width: 100%;
		}

		.left {
			width: 300px;
			min-height: 500px;
			background-color: pink;
		}

		.main {
			/* 2.弹性伸缩比: 保证left具有300px的宽度  */
			flex: 1;

			min-height: 500px;
			background-color: skyblue;
		}

		/* 3. 视口宽度 <= 992px，隐藏 .left */
		@media (max-width:992px) {
			.left {
				display: none;
			}

		}

		/*    visibility: hidden;
		隐藏元素：占位隐藏（隐藏的元素还占据位置）
		display：none;
		隐藏元素：不占位隐藏（常用的）
		*/
	</style>
</head>

<body>
	<div class="box">
		<div class="left">left</div>
		<div class="main">
			响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
		</div>
	</div>
</body>

</html>