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

黑猫Sennyou

已于 2022-04-22 17:42:32 修改

阅读量1.6k

点赞数

分类专栏： html+css 文章标签： html css

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

本文链接：https://blog.csdn.net/csdn_491407692/article/details/123956029

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

自适应—— 一般用百分比

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

	<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=<