阅读 350

移动WEB开发之响应式布局

响应式页面兼容移动端

  • 技术选型:
    1. 媒体查询
    2. bootstrap

响应式开发

  • 响应式开发原理
    • 使用媒体查询针对不同宽度的设备,进行布局和样式的设置,从而适配不同设备的目的。

响应式布局容器

  • 响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果。

  • 原理:在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

  • 平时响应式尺寸划分

    • 超小屏幕(手机、小于768px):设置宽度为100%
    • 小屏幕(平板、大于等于768px):设置宽度为750px
    • 中等屏幕(桌面显示器、大于等于992px):宽度设置为970px
    • 大屏幕(大桌面显示器、大于等于1200px):宽度设置为1170px
  • 案例:响应式导航

    • 需求分析
    • 响应式原理.html

Bootstrap前端开发框架

  • 简介:Bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的,它简洁灵活,使得Web开发更加快捷

  • 框架:就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

  • Bootstrap优点

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

Bootstrap版本

  • 2.x.x : 停止维护,兼容性好,代码不够简洁,功能不够完善
  • 3.x.x : 目前使用最多,稳定,但是放弃了IE6~IE7.对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB项目
  • 4.x.x : 最新版,目前还不是很流行

Bootstrap使用

  • 使用四部曲:
    1. 创建文件夹结构

    2. 创建html骨架结构

        <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
        <!--[if lt IE 9]>
           <!-- 解决ie9以下浏览器对html5新增标签的不识别,并导致css不起作用的问题 -->
           <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
           <!-- 解决ie9以下浏览器对css3Media Query 的不识别 -->
           <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
      复制代码
    3. 引入相关样式文件

          <!-- bootstrap核心样式 -->
          <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
      复制代码
    4. 书写内容

      • 直接拿bootstrap预先定义好的样式来使用
      • 修改Bootstrap原来的样式(一般都是通过类选择器来设置的样式),注意权重问题
      • 学好Bootstrap的关键在于:知道它定义了哪些样式,以及样式能实现什么样的效果

Bootstrap 布局容器

  • 需要为页面内容和栅格系统包裹一个.container容器。
  • 它提供了两个作此用处的类
    1. container类

      • 响应式布局的容器或固定宽度
      • 超小屏幕(手机、小于768px):设置宽度为100%
      • 小屏幕(平板、大于等于768px):设置宽度为750px
      • 中等屏幕(桌面显示器、大于等于992px):宽度设置为970px
      • 大屏幕(大桌面显示器、大于等于1200px):宽度设置为1170px
    2. container-fluid类

      • 流式布局容器或百分比宽度
      • 占据全部视口(viewport)的容器
      • 适合于制作移动端开发

Bootstrap栅格系统

  • 简介(grid systems)

    • 将页面布局化分为等宽的列,然后通过列数的定义来模块化页面布局。
    • Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。(多了会挤下去,少了就会缺一块)
  • 栅格选项参数

    • 按照不同屏幕划分为1~12等份
    • 行(row)可以去除父容器作用15px的边距
    • xs-extra small:超小; sm-small: 小; md-medium: 中等; lg-large: 大.
    • 列大于12,多余的列所在的元素将被作为一个整体另起一行排列
    • 每一列默认有左右15像素的padding
    • 可以同时为一列指定多个设备的类名,以便划分不同份数,例如class="col-md-4 col-sm-6"
  • 列嵌套

    • 栅格系统内置的栅格系统将内容再次嵌套。简单理解就是:一个列内再分成若干份小列
        <div class="col-sm-4">
          <div class="row">
            <div class="col-sm-6">小列</div>
            <div class="col-sm-6">小列</div>
          </div>
        </div>
      复制代码
  • 列偏移

    • 使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距(margin)
        <div class="row">
          <div class="col-lg-4">1</div>
          <div class="col-lg-4 col-lg-offset-4"></div>
        </div>
      复制代码
  • 列排序

    • 使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类很容易的改变列的顺序。
        <div class="row">
          <div class="col-lg-4 col-lg-push-8">左侧</div>
          <div class="col-lg-8 col-lg-pull-4">右侧</div>
        </div>
      复制代码

响应式工具

  • 含义:使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

    • 与之相反,visible-xs、visible-sm visible-md、visible-lg针对不同设备显示某个内容
  • Bootstrap其他(按钮、表达、表格)请参考Bootstrap

阿里百秀首页案例(详见代码)

文章分类
前端
文章标签