css中的@media媒体查询用法总结

最新推荐文章于 2023-12-23 17:08:12 发布

冷太阳a

最新推荐文章于 2023-12-23 17:08:12 发布

阅读量377

点赞数

分类专栏： HTML 、CSS

本文链接：https://blog.csdn.net/A_9888/article/details/113614399

版权

HTML 、CSS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			*{
				margin: 0;padding: 0;
			}
		    .container{
		        width:100vw;
		        margin: 0 auto;
		        height:100vh;
				max-height: 100vh;
		        background-color: red;
	/* 			background: url(img/bgc.jpg) center center / cover no-repeat rgb(34, 34, 34);
				overflow: hidden; */
		    }
			.container::before{
				content: "大于1200px";
			}
		    /*媒体查询：注意and后面需要留空格*/
			@media screen and (max-width: 414px) {
			    .container{
			        width:100%;
			        background-color: green;
			    }
				.container::before{
					content: "414-768px";
					font-size: 30px;
					color: #55ff00;
					text-align: center;
					display: flex;
					justify-content: center;
				}
			}
		    /*iphone768以下: w < 768px*/
		    @media screen and (max-width: 768px) and (min-width: 414px) {
		        .container{
		            width:100%;
					height: 50vh;
		            background-color: green;
		        }
				.container::before{
					content: "414-768px";
					font-size: 30px;
					color: #ff0000;
					text-align: center;
					display: flex;
					justify-content: center;
				}
		    }
		    /*iPad: w >= 768  && w< 992*/
		    @media screen and (max-width: 992px) and (min-width: 768px) {
		        .container{
		            width:750px;
		            background-color: blue;
					height: 70vh;
		        }
				.container::before{
					content: "768px-992px";
					font-size: 30px;
					color: #FFFFFF;
					text-align: center;
					display: flex;
					justify-content: center;
					
				}
		    }
		    /*中等屏幕   w >= 992  && w<1200*/
		    @media screen and (max-width: 1200px) and (min-width: 992px) {
		        .container{
		            width:970px;
		            background-color: pink;
					height: 80vh;
		        }
				.container::before{
					content: "992px-1200px";
					font-size: 30px;
					color: #000000;
					text-align: center;
					display: flex;
					justify-content: center;
				}
		    }
		</style>
	</head>
	<body>
		<div class="container">
			<div>asdd</div>
			<div>ss</div>
			
		</div>
	</body>
</html>

冷太阳a

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的@media媒体查询用法总结

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> *{ margin: 0;padding: 0; } .contain
复制链接

扫一扫