媒体查询自适应大小屏幕(更换布局)

最新推荐文章于 2024-05-30 15:44:20 发布

想要成仙的菜鸟前端

最新推荐文章于 2024-05-30 15:44:20 发布

阅读量935

点赞数

分类专栏： CSS 文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_44441669/article/details/128670841

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

大屏幕下：
在这里插入图片描述
小屏幕下：（按钮换行）

<div class="search-box">
	<div class="form-box">
		<a-form-item label="111" class="fromItemClass">
			<a-select
				ref="select"
				allowClear
				style="width: 120px"
				placeholder="全部"
			></a-select>
		</a-form-item>
		<a-form-item label="222" class="fromItemClass">
			........
		<a-form-item/>
		.....
	</div>
	<div class="btn-box">
		<a-button type="primary">btn1</a-button>
		<a-button type="primary">btn2</a-button>
		<a-button type="primary">btn3</a-button>
	</div>
</div>

css 媒体查询：

//  宽度大于等于 800px 大屏幕下
@media screen and (min-width:1200px ) {
	.form-box{
		width: calc(100% - 300px);
    	float: right;
	}
	.btn-box{
		float: left;
	}
}