css-响应式布局

原理：通过媒体查询实现

优点：面对不同分辨率设备灵活性强。能够快速解决多设备显示适应问题

缺点：兼容各种设备工作量大，效率低下，代码累赘

媒体查询

@media(){

}

min-width 从小到大

max-width 从大到小

使用场景1

约束移动端不要超过规定大小

body{
	max-width:530px;
	margin:0 auto;
}
//大于等于540px触发
@media (min-width:540px){
	html{
		font-size:53px !important;
	}
}

使用场景2

显示和隐藏

//小于等于540px触发
@media (max-width:540px){
	.box:nth-child(2){
		display:none;
	}
}

使用场景3

外链式引入

<link rel="stylesheet" href="./css" media="(min-width:540px)">

Bootstrap

https://www.bootcss.com/

栅格系统

默认将网页分成12份

<div class="row">
	<div class="col-lg-3 col-md-4 col-sm-5"></div>
</div>

col默认15px内边距，row默认-15px内边距

使用row来消除container内边距

列偏移

class= "col-lg-offset-(number)"

列嵌套

一个盒子里再嵌套其他盒子，父盒子分成12份