web前端开发第一阶段——原生响应式布局

响应式布局

让页面随着浏览器的屏幕宽度的变化而放大缩小

终端

width:100%
百分比：继承父级的宽度
max-width:最大宽度
min-width：最小宽度，当父级小于最小宽度，会产生滚动条

height:一般不用百分比
max-height:最大高度
min-height:最小高度

媒体查询

在不同的终端。浏览器宽度里面显示不同的样式
	@media：一般写在最下面，因为代码从上向下执行，会被覆盖
	媒体类型
		all:所有媒体——>直接用这个
		braille:盲文触觉设备
		embossed:盲文打印机
		print:手持设备
		projection:打印预览
		……
	@media all{
		.box{
			background:red;
		}
	}
	关键字
		and 和   与     || 
		or  或者   或   && 
		not   no   非    ！ 
	媒体特征
		宽高、屏幕、设备大小…… 
		@media all and (width:801px){
			.box{
				background:red;
			}
		}