Day15-多列、移动端布局

回顾

1.怪异盒模型与标准盒模型的区别
	标准盒模型width仅是内容区域的宽度,怪异盒模型width是包含边框和内边距的
	标准盒模型box-sizing:content-box;
	怪异盒模型box-sizing:border-box;
2.弹性盒
	父元素：
		display:flex;
		flex-direction:column;
		justify-content:;
		align-items:;
		flex-wrap:wrap;
		align-content:;
	子元素：
		align-self
		order
		flex-grow
		flex-shrink
		flex-basis
		flex:0 1 auto;

多列

column-count列数
column-gap间距
column-rule线条
- break-inside:avoid;避免元素内部折断

响应式

简而言之，就是一个网站能够兼容多个终端

媒体查询

/*1000px及以上的设备*/
@media only screen and (min-width:1000px) {
	.box{
		background: red;
	}
}
/*800px - 1000px之间的设备*/
@media only screen and (min-width: 800px) and (max-width: 1000px) {
	.box{
		background: green;
	}
}
/*800及以下设备*/
@media only screen and (max-width:800px ) {
	.box{
		background: blue;
	}
}

- 竖屏
	@media screen and (orientation:portrait){
		
	}
- 横屏
	@media screen and (orientation:landscape){
		
	}

移动端布局

1.meta标签
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放
	（默认设置为no，因为我们不希望用户放大缩小页面）
2.单位rem
	根元素字体大小的倍数
	一定段核心：如何动态改变根元素html的字体大小
	@media only screen and (max-width:320px) {
		html{
			font-size: 12px;
		}
	}
	@media only screen and (min-width: 321px) and (max-width:375px) {
		html{
			font-size: 14px;
		}
	}
	@media only screen and (min-width:376px) {
		html{
			font-size: 16px;
		}
	}
	- 元素的尺寸单位采用rem
	.box{
		width: 20rem;
		height: 20rem;
		background: red;
	}
3.二倍图
	ppi像素密度，所表示的是每英寸所拥有的像素数量
	dpr = 物理像素(设计稿)/逻辑像素(设置的代码width)