当前位置：首页 > article >正文

响应式开发（HTML5CSS3）实现媒体查询的功能案例

article 2025/2/24 12:57:40

前言

一、媒体查询知识点

二、实现功能的尺寸

三、代码部分

1.不带嵌套的媒体查询功能

1.1.代码段

1.2.运行结果

2.带嵌套的媒体查询功能

2.1.代码段

2.2.运行结果

2.2.3视频效果

前言

1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的HTML5媒体查询等功能方法的代码，这也是很多教材的一个典型案例；

2.本文将讲解涉及到HTML5表单等功能方法的知识点，其它方面会大致讲一下；

3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；

4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；

5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教，若程序出现问题请指教，我在吸取经验、改正文档；

6.这个是我上学跟老师所讲做出来的，若侵权，请联系删除!

提示：以下是本篇文章正文内容，下面案例可供参考

实现媒体查询案例（嵌套方式）

上述视频为本文最终实现的效果

一、媒体查询知识点

这是根据窗口宽度、屏幕比例等变化来实现页面的显示方式等效果。

<style>
@media screen and (max-width: 960px) {

/*样式设置等*/

}
</style>

二、实现功能的尺寸

仅供参考:

媒体查询需要实现的尺寸
尺寸大小	content嵌套宽/高大小
<550px	100%
<550px	200px
>551px	560px
>551px	300px
>750px	760px
>750px	400px
>950px	960px
>950px	500px
>1150px	1000px
>1150px	600px

三、代码部分

1.不带嵌套的媒体查询功能

1.1.代码段

<!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>媒体查询的功能案例</title>
    <style>
        body {
			background-color: red;
		}

		@media screen and (max-width: 550px) {
			body {
				background-color: blue;
			}
		}

		@media screen and (min-width: 551px) {
			body {
				background-color: yellow;
			}
		}

		@media screen and (min-width: 750px) {
			body {
				background-color: grey;
			}
		}

		@media screen and (min-width: 950px) {
			body {
				background-color: pink;
			}
		}

		@media screen and (min-width: 1150px) {
			body {
				background-color: yellowgreen;
			}
		}
    </style>
</head>
<body>
    <div id="content">
    </div>
</body>
</html>

1.2.运行结果

运行图片如下，仅供参考:

1.2.1全局尺寸

1.2.2缩小的尺寸

2.带嵌套的媒体查询功能

2.1.代码段

<!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>
        body {
			background-color: red;
		}

		@media screen and (max-width: 550px) {
			body {
				background-color: blue;
			}
            #content{
                width: 100%;
                height: 200px;
                background-color: red;
                margin: 20px auto;
            }
		}

		@media screen and (min-width: 551px) {
			body {
				background-color: yellow;
			}
            #content{
                width: 560px;
                height: 300px;
                background-color: rgb(18, 71, 218);
                margin: 20px auto;
            }
		}

		@media screen and (min-width: 750px) {
			body {
				background-color: grey;
			}
            #content{
                width: 760px;
                height: 400px;
                background-color: rgb(255, 239, 18);
                margin: 20px auto;
            }
		}

		@media screen and (min-width: 950px) {
			body {
				background-color: pink;
			}
            #content{
                width: 960px;
                height: 500px;
                background-color: rgb(13, 247, 255);
                margin: 20px auto;
            }
		}

		@media screen and (min-width: 1150px) {
			body {
				background-color: yellowgreen;
			}
            #content{
                width: 1000px;
                height: 600px;
                background-color: rgb(178, 19, 162);
                margin: 20px auto;
            }
		}
    </style>
</head>
<body>
    <div id="content">
    </div>
</body>
</html>