H5使用flex+百分比实现自适应

最新推荐文章于 2022-02-12 21:35:33 发布

_freely

最新推荐文章于 2022-02-12 21:35:33 发布

阅读量786

点赞数

分类专栏： css H5

本文链接：https://blog.csdn.net/hbjiankely/article/details/105851512

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

适配要求

在项目中使用flex和百分比实现不同机型之间的适配，屏幕变大图标尺寸变大并且设置最大值，屏幕尺寸变小图标尺寸变小

效果图

在这里插入图片描述

代码实现

html结构
<div class="out">
		<div class="box">
			<div class="item">
				<img src="img/bus.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
			<div class="item">
				<img src="img/wei.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
			<div class="item">
				<img src="img/zhi.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
			<div class="item">
				<img src="img/wei.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
			<div class="item">
				<img src="img/zhi.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
			<div class="item">
				<img src="img/zhi.png" class="icon-img" alt="" />
				<p class="icon-text">微信</p>
			</div>
		</div>
	</div>
	css 实现
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.out {
			width: 100%;
		}

		.box {
			display: flex;
			flex-wrap: wrap;
		}

		.item {
			width: 25%;
			padding: 5px 0;
			text-align: center;
		}

		.icon-img {
			max-width: 200px;
			width: 70%;
			border-radius: 30%;
			text-align: center;
		}

		.icon-text {
			display: block;
			font-size: 12px;
			text-align: center;
		}
	</style>