Bootstrap初步了解

一、响应式原理

1.响应式所具有的特点

1. 网页的宽度自动调整
2. 尽量少用绝对宽度
3. 字体要使用rem、em做为单位
4. 布局要使用浮动、弹性布局

2.@规则

1. @chartset 定义编码
2. @import 引入css文件（css模块化）
3. @font-face 自定义字体
4. @keyframes animation里的关键帧
5. @media 媒体查询

3.媒体查询

根据一个或多个基于设备类型、具体特点和环境来应用样式

1. 媒体类型
2. 媒体特性
3. 逻辑运算符

二、媒体类型

1. all所有设备

	@media all{
		div{
			width: 400px;
			height: 400px;
			background: grey;
		}
	}

2.print打印机设备

	@media print{
		div{
			font-size: 80px;
		}
	}

3.screen彩色的电脑屏幕

	@media screen{
		div{
			width: 300px;
			height: 300px;
			background: pink;
		}
	}

4.speech听觉设备

三、媒体特性

1.width 宽度

1. min-width 最小宽度，宽度只能比这个大
2. max-width 最大的宽度，宽度只能比这个小

	/* 屏幕尺寸大于500的时候满足 */
	@media (min-width:500px){
		div{
			background: green;
		}
	}
	/* 屏幕尺寸小于400的时候满足 */
	@media (max-width:400px){
		div{
			background: blue;
		}
	}

2.height 高度

1. min-width 最小高度，高度只能比这个大
2. max-width 最大的高度，高度只能比这个小

	/* 屏幕高度大于500的时候满足 */
	@media (min-height:500px){
		div{
			background: green;
			border: 2px solid #000;
		}
	}

3.orientation 方向

1. landscape 横屏（宽度大于高度）
2. portrait 竖屏（高度大于宽度）

	/* 横屏的时候满足 */
	@media (orientation:landscape){
		div{
			width: 400px;
			height: 100px;
		}
	}

	/* 竖屏的时候满足 */
	@media (orientation:portrait){
		div{
			width: 100px;
			height: 400px;
		}
	}

4.aspect-ratio宽度比

	/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
	@media (aspect-ratio:4/3){
		div{
			border: 10px solid #000;
		}
	}

5.-webkit-device-pixel-ratio 像素比

（webkit内核的私有属性）

	/* 当像素比为2的时候，满足 */
	@media (-webkit-device-pixel-ratio:2){
		div:after{
			content: '陈学辉';
			font-size: 50px;
		}
	}

四、逻辑与算符

1. and 合并多个媒体查询（并且的意思）

	/* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
	@media all and (min-width:700px) and (orientation: landscape){
		div{
			background: green;
		}
	}

2. , 匹配某个媒体查询（或者的意思）

	/* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
	@media (max-width:800px),(orientation: landscape){
		div{
			background: pink;
		}
	}

3. not 对媒体查询结果取反

	/* 屏幕的尺寸要大于800的时候，整个才满足 */
	@media not all and (max-width:800px){
		div{
			background: blue;
		}
	}

4. only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

	/* 仅彩色显示屏，屏幕的尺寸要大于800的时候，才满足 */
	@media only screen and (min-width:1000px){
		div{
			background: grey;
		}
	}