响应式概念：
一个网页可以兼容多种设备，而不是每一种设备写一套网页
常规的网站，大部分是1200px，缩小会出现横向滚动条，布局，样式全都不会改变
响应式和自适应的区别？
响应式：1套代码 典型例子：intel官网
自适应：多套代码，根据不同的设备加载不同的代码
示例网站：大部分的网站都有，因为现在的人用手机太多了
响应式网页的不足：
内容不宜过多，只适合一些展示类网站，代码量变大了，复杂了。不能有过于复杂的动画
响应式/自适应网页的测试：
1.浏览器自带的模拟器
优点：简单方便
缺点：结果要进一步确定
2.真实物理设备测试（大公司真是这样干的）
iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
安卓 一样买一个
pad ipad 一样买一个
优点：测试真实可靠
缺点：成本高，测试任务量极大
3.电脑上自带的手机模拟器效果
响应式网站如何编写：
1.必须声明viewport（重点重点）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2.使用流式布局
float:left , display:inline-block
3.文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）
em是一个相对单位，相对父元素
rem是一个相对单位，相对于页面的根元素，即html
谷歌浏览器的最小号字体为12px，如果不足12，全部显示为12，别的浏览器没有限制
ont-size: 62.5%; 大部分浏览器的默认字体为16px，62.5就是10px
font-size: 100px;
4.最重要的原则：媒体查询技术 css3中的内容 media query
写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了
下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
