04-移动WEB开发_响应式布局

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45555964/article/details/100587009

移动WEB开发_响应式布局

01-响应式布局原理

• 使用媒体查询针对不同尺寸的设备进行对应的布局和样式设置

02-响应式布局容器

• 通过媒体查询改变布局容器的大小,再改变子元素的布局，从而实现不同设备不同布局

• 父容器版心的尺寸划分

  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

• 也可以根据实际情况自己定义划分

03-bootstrap简介

• Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

  • 中文网 官网 推荐网站

• 优点：

  • 标准化的html+css编码规范
  • 提供了一套简洁、直观、强悍的组件
  • 有自己的生态圈，不断的更新迭代
  • 让开发更简单，提高了开发的效率

• 版本:推荐3.x.x，目前使用用户多，最稳定，移动端优先，偏向于响应式布局

04-bootstrap使用

• 四部曲：

  • 创建文件夹结构
    • lib文件夹：专门放下载好的引用文件，如：bootstrap文件夹
  • 创建 html 骨架结构

  [外链图片转存失败(img-1YReHOzP-1567776673497)(04-移动WEB开发_响应式布局.assets/1567161969718.png)]

  <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  

  • 引入相关样式文件

  <!-- Bootstrap 核心样式-->
  <!-- 已经包含了normalize.css初始化文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  

  • 书写内容
    • 直接拿Bootstrap 预先定义好的样式来使用
    • 修改Bootstrap 原来的样式，注意权重问题

05-bootstrap布局容器

• .container：响应式布局容器
  • 大屏 ( >=1200px) 宽度定为 1170px
  • 中屏 ( >=992px) 宽度定为 970px
  • 小屏 ( >=768px) 宽度定为 750px
  • 超小屏 (100%)
• .container-fluid：流式布局容器
  • 100%宽度，占据全部视口（viewport），适合单独做移动端开发
• 注：直接调用bootstrap中的类

06-bootstrap格栅系统

• 将页面宽度划分为等宽若干份列，栅格系统用于通过一系列的行（row）与列（column）的组合来布局页面
• bootstrap随着屏幕或视口（viewport）尺寸的增加，会自动分为12列

07-bootstrap格栅系统参数

[外链图片转存失败(img-phhOAD9G-1567776673498)(04-移动WEB开发_响应式布局.assets/1567162549877.png)]

• 行：.row
  • 必须包含在container中（可嵌套在col中）
  • 亲儿子只能是col
• 列：col
  • x为所占列数
  • 超小：.col-xs-x
  • 小：.col-sm-x
  • 中：.col-md-x
  • 大：.col-lg-x
• 特别说明
  • 当子元素总份数超过12时，多余的会在另一行显示
  • 每一列默认有左右15px的padding
  • 可以同时含有多个类名

08-bootstrap格栅嵌套

• 取消父元素的padding值

• 子元素的高和父级一样

  扫描二维码关注公众号，回复： 7196203 查看本文章

<!-- row含有col，而col作为父盒子嵌套row时  可以取消爷爷元素row的padding值 且嵌套row中的子元素高度和爷爷级一样高-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">
    	   		</div>
                <div class="col-md-6">
    	   		</div>
            </div>
        </div>
    </div>
</div>

09-bootstrap格栅系统 列偏移

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

10-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

11-bootstrap格栅系统 响应式工具

• 隐藏页面内容：.hidden
  • 超小屏隐藏：.hidden-xs
  • 小屏隐藏：.hidden-sm
  • 中屏隐藏：.hidden-md
  • 大屏隐藏：.hidden-lg

00-总结

可以直接调用已经封装好的bootstrap文件中的类名，编程更简单。

依靠bootstrap的布局容器，再根据页面屏幕尺寸的四种大小设置不同屏幕尺寸的css样式，使整体的页面随着屏幕尺寸的改变而发生改变。

每种屏幕尺寸都注重细节上的改变，所以需要细心的调各元素的细节。