<div class="Search">
					<div class="input">
						<a-input>
							<template #prepend>
								<span class="mid">CDKey</span>
							</template>
						</a-input>
						<a-input>
							<template #prepend>
								<span class="mid">UID</span>
							</template>
						</a-input>
					</div>
					<div class="input">
						<span class="mid">查询资格</span>
					</div>
				</div>

                给input设置auto，以实现高度对齐；

2. flex时，input为子元素时，宽度会缩小； 这是因为父元素或者父元素的父元素没有设置width：100%；

.container{
	padding: min(5em, 10%); // 通过min而不是媒体查询来实现响应式；
}

.title{
	font-size: clamp(1rem, calc(2vw+1rem), 2rem); // clamp(最小值, 首选值, 最大值)； 给font-size设置vw，来避免换行，使用calc来设置字体的基准值
}

img {
	max-width: 100%; // 自动缩放
	height: auto; // 高度自适应
	aspect-ratio: 16/9; // 设置宽高比
	object-fit: contain; // 设置图片的填充方式
}

.container{
	height: 100vh;
	height: 100dvh; // 使用dvh来实现响应式, 避免使用vh出现上下空行
}

4. 通过grid设置自动重复，获取良好的视效

.container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 16px;
}