• 响应式——媒体查询

    上个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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    媒体查询-书写顺序

    在这里插入图片描述

    代码：

    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    媒体查询-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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    媒体查询-隐藏

    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
  • 相关阅读:
    Ray tracing 光线追踪 之 embree ，从入门到精通 01 安装与体验
    建立JDBC连接
    PPT不能编辑，如何取消PPT的只读模式？
    创新案例｜鞋服巨头Nike如何以DTC战略实现可持续增长
    【文章学习系列之模型】Koopa
    大数据技术之Hadoop：Yarn集群部署（七）
    【微服务】 微服务学习笔记二：Eureka注册中心的介绍及搭建
    Python中的*args和**kwargs
    大坝安全监测解决方案
    IOS输入框聚焦会把内容区域顶起
  • 原文地址：https://blog.csdn.net/asacmxjc/article/details/125516522