目录
前言
一、媒体查询知识点
二、实现功能的尺寸
三、代码部分
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% |
| 200px | |
| >551px | 560px |
| 300px | |
| >750px | 760px |
| 400px | |
| >950px | 960px |
| 500px | |
| >1150px | 1000px |
| 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>2.2.运行结果
运行图片如下，仅供参考:
2.2.1全局尺寸
2.2.2缩小的尺寸
2.2.3视频效果
这里只展示媒体查询嵌套实现的效果视频
实现媒体查询案例（嵌套方式）
