bootstrap之响应式原理

一、什么是响应式

我觉得响应式就是当我们设置的网页是需要根据用户的不同需求实时的改变的，其核心主要是通过媒体查询来实现的，还可以使用栅格布局、排版等一些其他的工具相配合，使页面在改变之后展示还能达到理想样式

二、响应式的特点

1、网页的宽度自动调整

例如当我们打开一个网页时，拉动页面使之宽度发生变化，那么展示的内容也会随着宽度的增大缩小而改变一行所容纳的内容多少。

2、尽量少用绝对宽度

因为一旦设置了固定的宽度，页面的内容就不会随宽度变化而变化，只会出现滚动条，并不是我们想要的结果

3、字体要使用rem、em做为单位

4、布局要使用浮动、弹性布局

三、媒体查询

参考：https://drafts.csswg.org/mediaqueries/

格式：一般都是卸载head标签中，媒体特性一定要放在括号中才行

@media 媒体类型 逻辑运算符 (媒体特性){
   
				CSS样式
			}

1、媒体类型

• all        所有设备
• print        打印机设备
• screen        彩色的电脑屏幕
• speech        听觉设备（针对有视力障碍的人士，可以把页面的内太容易语音的方式呈现的设备）

注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询中已经废弃

2、媒体特性

			width	宽度
				min-width	最小宽度，宽度只能比这个大
				max-width	最大的宽度，宽度只能比这个小
				
			height	高度
				min-width	最小高度，高度只能比这个大
				max-width	最大的高度，高度只能比这个小
				
			orientation		方向
				landscape	横屏（宽度大于高度）
				portrait	竖屏（高度大于宽度）
				
			aspect-ratio	宽度比
			-webkit-device-pixel-ratio	像素比（webkit内核的私有属性）