BootStrap（day01）

BootStrap

响应式布局（css3）

1. 什么是响应式的网页
   Responsive web page 响应式网页
   可以根据浏览器设备不同(pc, pad, phone)
   而自动改变布局, 图片, 文字效果, 不会影响用户体验

2. 响应式布局（必须做到下面几件事）
   ① 布局, 不能固定元素宽度, 必须使用 流式布局(默认布局 + 浮动) + 弹性布局 + 栅格布局

② 文字和图片随着容器大小变化

③ 媒体查询技术（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.0">

   ② 所有的 内容/文字/图片 都使用相对尺寸（尽量）, 少使用绝对值

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

   ④ 媒体查询
   css3 Media Query 做响应式的必备技术
   Media: 媒体, 浏览网页的设备

   设备: screen(pc/pad/phone) | TV（电视机） / print（打印机）

   根据浏览网页设备的不同（尺寸、方向、硬件、解析度等）,有选择的执行一部分 css 忽略其他 css 样式

练习: