Bootstrap响应式布局介绍

一.响应式布局

1.什么是响应式网页

2.响应式网页必须做到的几件事

1.布局，使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) 代码复杂程度几何性的增加 复杂网页，不适合使用响应式布局

3.如何测试响应式网页

①使用真实设备

好处：真实可靠 缺点：成本高，测试任务量巨大

②使用第三方模拟软件测试

好处：方便，快捷 缺点：测试效果有限，有待进一步验证

③使用chrome自带的模拟器测试

好处：简单方便 坏处：测试效果十分有限

4.编写响应式布局(重点*****************)

①手机适配

视口的设置，如果项目需要在移动端运行，需要设置视口 <Meta name="viewport" content="width=device-width,  initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> width=device-width 设置视口宽度等于设备宽度 initial-scale=1.0,  设置视口宽度初始能不能缩放  1.0代表不能 maximum-scale=1.0,  设置视口最大缩放比例   1.0最大1倍 user-scalable=0 设置是否允许用户缩放视口   0不允许 视口最简洁的写法 <Meta name="viewport" content="width=device-width, initial-scale=1">

②所有的内容/文字/图片都使用相对尺寸(尽量)，少使用绝对值

③流式布局+弹性布局+媒体查询(栅格布局) 完成响应式布局

④媒体查询

CSS3 Media Query 做响应式的必备技术 Media：媒体，浏览网页的设备         设备：screen(pc/pad/phone)               TV/print 根据浏览网页的设备不同(尺寸，方向，硬件，解析度等)，有选择的，执行一部分css样式，忽略其他css样式