CSS3 中媒体查询 @media 的常见使用和案例说明

最新推荐文章于 2024-05-22 12:05:09 发布

Python User

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量615

点赞数

分类专栏： CSS/CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44684357/article/details/109996212

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，说白了就是对样式的重置；

媒体类型：


all	适用于所有设备
screen	用于PC端，智能手机，平板中
print	应用于打印机或打印预览
speech	用于屏幕阅读器等发声设备

媒体功能：
min-width：适用于PC端和移动端
min-device-width：只适用于移动端

当使用min-的时候，从小到大排布：

	body {
			background: red
		}
		@media screen and (min-width: 750px) {
			/* 当最小值是750px的时候 */
			body {
				background: blue
			}
		}
		@media screen and (min-width: 950px) {
			/* 当最小值是950px的时候 */
			body {
				background: skyblue
			}
		}
		@media screen and (min-width: 1050px) {
			/* 当最小值是1050px的时候 */
			body {
				background: pink
			}
		}

当使用max的时候，从大往小排布：

	body {
			background: red
		}
		@media screen and (max-width: 1050px) {
			/* 当最小值是750px的时候 */
			body {
				background: blue
			}
		}
		@media screen and (max-width: 950px) {
			/* 当最小值是950px的时候 */
			body {
				background: skyblue
			}
		}
		@media screen and (max-width: 750px) {
			/* 当最小值是1050px的时候 */
			body {
				background: pink
			}
		}

通过媒体查询实现页面排布的案例，超过1000px一行4个，700px放三个，400px两个，小于400 放1个：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>@media查询 排布</title>
	<style>
		.con {
			width: 100%;
			height: 600px;
		}
		.con div {
			width: 100%;
			height: 300px;
			background: pink;
			border: 1px solid blue;
			float:left;
		}
		@media screen and (min-width: 400px) {
			.con div {
				width: 49%;
			}
		}
		@media screen and (min-width: 700px) {
			.con div {
				width: 32.33%;
			}
		}
		@media screen and (min-width: 1000px) {
			.con div {
				width: 24%;
			}
		}
	</style>
</head>
<body>
	<div class="con">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

Python User

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 中媒体查询 @media 的常见使用和案例说明

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面,说白了就是对样式得重置；媒体类型：all适用于所有设备screen用于PC端，智能手机，平板中print应用于打印机或打印预览speech用于屏幕阅读器等发声设备媒体功能：min-width：适用于PC端和移动端min-device-width：只适用于移动端当使用min-的时候，从小到大排布： body { background: red }
复制链接

扫一扫