【个人向】媒体查询，自适应屏幕大小

原创已于 2022-04-22 17:42:32 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

于 2022-04-22 17:28:37 首次发布

html+css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用CSS中的媒体查询(@media)来实现网页的自适应设计。通过百分比设置元素宽度实现基本的自适应效果，再结合媒体查询在不同屏幕尺寸下调整样式，以适应手机、平板和桌面等不同设备。媒体查询可以重写或添加样式，确保元素在不同屏幕大小下的响应性和布局合理性。建议掌握这一技术，以创建更具响应性的网站。

自适应屏幕大小不让网页内容混乱

自适应—— 一般用百分比

将盒子宽度使用百分比，当屏幕大小改变时，盒子也会进行相应的改变；

	<style>
		.box_1{
			width: 100%; 
			height: 100px; 
			background-color: #fff673;
		}
		.box_2{
			width: 100%; 
			height: 120px; 
			background-color: #f0f0f0;
		}
		.box_2_1{
			width: 40%; 
			height: 80px; 
			margin: 0 5%;
			background-color: #fff673; 
			float: left;
		}
		.box_2_2{
			width: 21%; 
			height: 80px; 
			margin: 0 2%;
			background-color: #fff673; 
			float: left;
		}
	</style>
	-------
	<body>
		<div class="box_1">
			改变屏幕大小看到大小随屏幕改变
		</div>
		<div class="box_2">
			<p>改变屏幕大小看到大小随屏幕改变</p>
			<div class="box_2_1"></div>
			<div class="box_2_1"></div>
		</div>
		<div class="box_2">
			<p>改变屏幕大小看到大小随屏幕改变</p>
			<div class="box_2_2"></div>
			<div class="box_2_2"></div>
			<div class="box_2_2"></div>
			<div class="box_2_2"></div>
		</div>
	</body>

使用百分比，有些内容是不能自适应的，间距会固定比例，在需要屏幕缩放到一定比例不要间距的情况下，可以用媒体查询：@media ；

@media 媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式

	<style>
		div {
			width: 500px;
			height: 300px;
			background: #90EE90;
		}
		@media screen and (max-width: 1440px) { 
	    	div {
	        	background-color: #fff673;
	        }   /*当屏幕小于1440px时，改变背景颜色*/
    	} 
	</style>
	-------
	<body>
		<div>
			<p>改变屏幕大小在 "1440px" 附近时查看div颜色</p>
		</div>
	</body>

@media 和百分比搭配使用，几乎做响应式的大部分页面

	<style>
		div {
			width: 100%;
			height: 150px;
			background: #90EE90;
		}
		
		@media screen and (max-width:1440px) and (min-width:1024px) {
		    div { background: #90e0ee; }
		}
		@media screen and (max-width:1024px) and (min-width:768px) {
			div { background: #db90ee; }
		}
		@media screen and (max-width:768px) and (min-width:425px) {
		    div { background: #eecd90; }
		}
		@media screen and (max-width:425px) {
			div { background: #ee9090; }
		}
	</style>
	-------
	<body>
		<div>
			<p>改变屏幕大小查看div颜色</p>
		</div>
	</body>

在不同屏幕大小下，观察里面元素的响应及显隐情况

	<style>
		.box {
			width: 100%;
			height: 72px;
			background: #90EE90;
		}
		.head {
			width: 62.5%;
			height: 72px;
			margin: auto;
		}
		.logo {
			width: 17%;
			height: 72px;
			float: left;
			background: #f7f7f7;
		}
		.nav {
			width: 54%;
			height: 72px;
			float: left;
			margin: 0 3%;
			background: #f7f7f7;
		}
		.phone {
			width: 23%;
			height: 72px;
			float: left;
			background: #f7f7f7;
		}
		
		@media screen and (max-width:1440px) and (min-width:1024px) {
			.head {
				width: 80%;
			}
			.logo,.nav,.phone {
				background: #90e0ee;
			}
		}
		@media screen and (max-width:1024px) and (min-width:768px) {
			.head {
				width: 95%;
			}
			.nav {
				width: 58%;
				margin: 0 1%;
			}
			.logo,.nav,.phone {
				background: #db90ee;
			}
		}
		@media screen and (max-width:768px) and (min-width:425px) {
		    .head {
				width: 100%;
			}
			.nav {
				display: none;
			}
			.phone{
				float: right;
			}
			.logo,.nav,.phone {
				background: #eecd90;
			}
		}
		@media screen and (max-width:425px) {
			.head {
				width: 100%;
			}
			.nav {
				display: none;
			}
			.phone {
				display:none;
			}
			.logo,.nav,.phone {
				background: #ee9090;
			}
		}
	</style>
	-------
	<body>
		<div class="box">
			<div class="head">
				<div class="logo">logo</div>
				<div class="nav">改变屏幕大小查看div颜色</div>
				<div class="phone">123 4567 8901</div>
			</div>
		</div>
	</body>

不同屏幕大小下，元素排列情况

	<style>
		.box {
			width: 100%;
			background: #90EE90;
			overflow: hidden;
		}
		.box_li {
			width: 21%;
			height: 360px;
			background: #f7f7f7;
			float: left;
			margin: 3% 2%;
		}
		
		@media screen and (max-width:1440px) and (min-width:750px) {
        	.box_li{
        		width: 44%;
        		margin: 4% 3%;
            }
		}
		@media screen and (max-width:750px) {
			.box_li{
            	width: 90%;
            	margin: 5% 5%;
          	}
		}
	</style>
	-------
	<body>
		<div class="box">
			<div class="box_li"></div>
			<div class="box_li"></div>
			<div class="box_li"></div>
			<div class="box_li"></div>
		</div>
	</body>