移动开发第四天-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45554298/article/details/100189702

移动web开发-day04-响应式布局-小结

01-移动web开发响应式布局导读

目录
- 响应式开发
- Bootstrap前端开发框架
- Bootstrap栅格系统
- 阿里百秀首页案例
目标
- 能够说出响应式原理
- 能够使用媒体查询完成响应式导航
- 能够使用Bootstrap的栅格系统
- 能够使用Bootstrap的响应式工具
- 能够完成阿里百秀首页案例

02-响应式开发原理

一句话：就是使用媒体查询针对不同尺寸的设备进行对应的布局和样式设置

03-响应式布局容器

响应式需要一个父元素作为布局容器，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的布局，从而实现不同设备不同布局
常见尺寸划分

设备尺寸区间
超小屏（手机） < 768px
小屏（平板） >= 768px ~ < 992px
中屏（显示器） >= 992px ~ < 1200px
大屏（大显示器） >= 1200px

设备	尺寸区间
超小屏（手机）	< 768px
小屏（平板）	>= 768px ~ < 992px
中屏（显示器）	>= 992px ~ < 1200px
大屏（大显示器）	>= 1200px

04-响应式导航案例

05-Bootstrap简介

优点
- 编码规范
- 现成的组件
- 生态圈、不断更新迭代
- 提高开发效率
版本，推荐3.x.x，目前使用最多，最稳定，移动端优先，偏向用于响应式布局

06-Bootstrap使用（上）

四步曲：
- 创建文件夹结构
- 创建html骨架
- 引入相关样式文件
- 注意：bootstrap已经包含了normalize.css，无需额外引入
- coding…
暂时不用关心JS这块

07-Bootstrap使用（下）

08-Bootstrap布局容器

container

响应式布局容器
- 超小屏（手机）（< 768px），宽度为：100%
- 小屏（平板）（>= 768px），宽度为：750px
- 中屏（显示器）（>= 992px），宽度为：970px
- 大屏（大显示器）（>= 1200px），宽度为：1170px
container-fluid

流式布局容器，100%宽度，适合单独做移动端开发

09-Bootstrap栅格系统

将页面宽度划分为等宽的若干份列（各屏幕都一样），通过一系列的行（row）与列（column）来布局页面
bootstrap给我们分为了12列

10-Bootstrap栅格系统使用（上）

如果我们的列等于12，那么就铺满整个行
如果我们的列小于12，那么就铺不满整个行，会有空白
如果我们的列大于12，那么多出来的那一列会另起一行显示

11-Bootstrap栅格系统使用（下）

行：row
- 必须包含在布局容器类中（可嵌套在col中）
- 亲儿子只能是col
列：col
- 超小：col-xs-x
- 小：col-sm-x
- 中：col-md-x
- 大：col-lg-x

12-Bootstrap列嵌套

在col里面添加一个新的row

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-6">1-1</div>
        <div class="col-md-6">1-2</div>
      </div>
    </div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
  </div>
</div>

13-Bootstarp列偏移

列偏移：offset
- 超小：col-xs-offset-x
- 小：col-sm-offset-x
- 中：col-md-offset-x
- 大：col-lg-offset-x

14-Bootstrap列排序

列排序
- 推：push
  - 超小：col-xs-push-x
  - 小：col-sm-push-x
  - 中：col-md-push-x
  - 大：col-lg-push-x
- 拉：pull
  - 超小：col-xs-pull-x
  - 小：col-sm-pull-x
  - 中：col-md-pull-x
  - 大：col-lg-pull-x