媒体查询

最新推荐文章于 2023-04-03 18:49:18 发布

ease_07

最新推荐文章于 2023-04-03 18:49:18 发布

阅读量138

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/weixin_44125957/article/details/103207499

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

媒体类型all screen print speech

省略查询则是all

逻辑：与and 或, 非not

媒体特征表达式
max-width min-width -webkit-device-pixel-ratio orentation:landscape横屏 portrait竖屏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=scalable,user-scalable=no">
    <title>媒体查询</title>
    <style type="text/css">
        /*当screen 最小宽度为900px时*/
        @media screen and (min-width:900px){
            body{
                background:red;
            }
        }

        /*媒体类型all screen print speech*/
        /*当all最小宽度为600px时*/
        /*省略查询则是all*/
        @media(min-width:600px){
            body{
                background:lightblue;
            }
        }

        /*当print设备最大宽度为296px时*/
        @media print and (max-width:296px){
            body{
                background:lightgreen;
            }
        }

        /*当screen最小宽度为900px 且 所有设备最大宽度为1024px*/
        @media screen and (min-width:900px) all and (max-width:1024px){
            body{
                background:lightgreen;
            }
        }
        /*当screen 最小宽度为900px 或 最大宽度为1024px时*/
        @media screen and (min-width:900px),screen and (max-width:1024px){
            body{
                background:green;
            }
        }

        /*当screen 最小宽度不是900px 且 all 最大宽度不是1024px时*/
        @media not screen and (min-width:900px) and (max-width:1024px){
            body{
                background:pink;
            }
        }

        /*当screen最小宽度不是900px 或screen最大宽度不是1000px时 body背景色为lightgreen*/
        @media not screen and (min-width:900px),not screen and (max-width:1000px){
            body{
                background:lightgreen;
            }
        }

        /*媒体特征表达式*/
        /*max-width min-width
        -webkit-device-pixel-ratio
        orentation:landscape横屏 portrait竖屏*/

        /*针对移动端 设备像素比：2*/
        /*设备像素比为2 且方向为横屏 */
        @media (-webkit-device-pixel-ratio:2) and (orientation:landscape){
            body{
                background-color:red;
            }
        }
    </style>
</head>
<body>

</body>
</html>

//12张图片适配
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>媒体查询例子</title>
	<style type="text/css">
		/*
		xs:576px
		sm:576-768px
		md:768px-992px
		lg:992px-1200px
		xl:1200px-
		*/
		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
		}
		body{
			padding-top:200px;
		}
		img{
			width:100%;
			height:100%;
		}
		.row{
			width:100%;
			display:flex;
			flex-wrap:wrap;
		}
		.col{
			padding:10px 0;
			background-color:rgba(86,61,124,0.15);
			border:1px solid rgba(86,61,124,0.2);
		}
		@media(max-width:576px){
			.col{
				width:100%;
			}
		}
		@media (min-width:576px) and (max-width:768px){
			.col{
				width:50%;
			}
		}
		@media (min-width:769px) and (max-width:992px){
			.col{
				width:25%;
			}
		}
		@media (min-width:993px) and (max-width:1200px){
			.col{
				width:16.66667%;
			}
		}
		/*100%/12 显示12个*/
		@media (min-width:1201px){
			.col{
				width:8.33333%;
			}
		}

		/*pc first*/
		.col{
			width:8.33333%;
		}
		@media (min-width:1200px){
			.col{
				width:16.6667%;
			}
		}
		@media (min-width:992px){
			.col{
				width:25%;
			}
		}
		@media (min-width:768px){
			.col{
				width:50%;
			}
		}
		@media (min-width:567px){
			.col{
				width:100%;
			}
		}

		/*mobile first*/
		/*12张图片 img相对于父容器宽度100% 适配减小相应的父容器宽度*/
		.col{
			width:100%;
		}
		@media (min-width:567px){
			.col{
				width:50%;
			}
		}
		@media (min-width:768px){
			.col{
				width:25%;
			}
		}
		@media (min-width:992px){
			.col{
				width:16.6667%;
			}
		}
		@media (min-width:1200px){
			.col{
				width:8.3333%;
			}
		}
	</style>
</head>
<body>
	<div class="row">
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
		<div class="col">
			<img src="img/3-1.png">
		</div>
	</div>
</body>
</html>