响应式就是一个网站可以兼容多个终端
原理是媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
5种布局
1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
5、弹性布局（rem/em布局）包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
PPI、DPI都称为像素密度
各种屏幕的区别
超小屏幕（移动设备） 768px以下小屏设备 768px-992px中等屏幕 992px-1200px宽屏设备 1200px以上。
w>1200:lg large
w: 992~1200：md middle
w：768~992:sm small
w<768:xs extra small
移动web开发和响应式开发都是现在主流的开发模式 使用的都是流式布局，来适配不同的设备
点透
点击子元素事件，父元素上的事件也会响应，是因为事件冒泡导致的
栅格系统
就是用来描述当前元素在指定屏幕下占据当前屏幕默认12等分中的n等分（1~12）
步骤
1、先添加容器container/container-fluid
2、在容器中添加row
3、在row中添加子元素。设置栅格样式
4、在子元素添加具体内容
视口viewport参数
width：宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale：初始缩放比，大于0的数字maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）；
用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面
