html 中 css 的响应式布局

html 中 css 的响应式布局

此文件会随着时间不断更新

jsp 中 col-sm-3 col-md-6 col-lg-4 col-xl-2 那个在前面以那个大小为主，这就就以 col-sm-3 在bootstrap 中的所定义的大小（576px）为主，只要是比这个定义的数字小就发生重叠。

<!--  -->
<div class="container">

	<div class="bg_body">
		<div class="row">
			<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
				
			</div>
			<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
				
			</div>
		</div>
	</div>

</div>

css 中

/* 最大屏幕为 1000px */
@media ( max-width :1000px) {
	.container {
		max-width: 90%;
	}
}

/* 最小屏幕为 1000px */
@media ( min-width :1000px) {
	.container {
		max-width: 90%;
	}
}