一、Bootstrap
Bootstrap的官网：www.bootcss.com
1.响应式布局
Responsive web page 响应式/自适应的网页
可以根据浏览器设备的不同(pc,pad,phone)
自动调用对应的布局，图片，文字效果，从而不会降低用户体验。
2.响应式网页必须做到的前提
1.布局：不能固定宽度，必须是流式布局(尽量少用定位,可以浮动)
2.文字和图片，大小随着容器大小而改变 em rem
3.媒体查询技术
响应式页面存在的问题：
-
-
- 页面的复杂度极大的增加
- 只适用用内容不多的页面(企业的官网，门户网站)
- 媒体查询技术属于h5/c3的技术
-
boot把媒体查询这件事封装了，不需要我们自己写了
3.如何测试响应式页面
1.使用真实设备测试
- 好处：真实、可靠
- 缺点：测试任务量巨大
2.使用的第三方的模拟测试软件
- 好处：无需添置太多真实设备，测试方便
- 缺点：测试效果有限，有待进一步验证
3.使用浏览器自带的模拟器测试
- 好处：简单方便
- 缺点：测试效果有限，有待进一步验证
4.如何编写响应式布局
1.在元数据标签中定义viewport---视口
name="viewport"
content 设置能够允许网页进行操作
width=device-width 表示视口宽度就是设备宽度
initial-scale=1.0 表示视口宽度是否可以缩放 1.0不能缩放
maximum-scale=1.0 允许缩放的最大倍率
user-scalable=0 是否允许用户手动缩放 yes/no/1/0
一般的设置：
<meta name="viewport" content="width=device-width,initial-scale=1" >
2.所有内容/文字/图片,相对尺寸，不能使用10px这种绝对的值。
3.流式布局+弹性布局，在搭配媒体查询技术来完成响应式布局
float flex
4.使用css3 Media Query 技术做响应式网页
Media:媒体，只浏览网页的设备。如：screen(pc/pad/phone) tv print
Media Query:媒体查询，可以自动根据当前浏览器设备的不同(尺寸，解析度，方向不同)，
有选择指定一部分CSS而忽略其他部分的CSS.
根据媒体查询的结果，执行同一个css文件下的不同代码块。
@media screen and (min-768px) and (max-991px){
选择器{样式}
}