移动Web开发，响应式该注意哪些问题？

Posted 2021-04-30 ITjob远标教育

一、 响应式开发简介
      1.1 什么是响应式开发
      在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
       通常的做法是针对移动端单独做一套特定的版本。
       但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
       那么 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
       1.2 响应式开发的前景
      现在的移动设备屏幕越来越大。越来越多的设计师也采用了这种设计。在新建站的一些网站现在普遍采用的响应式开发。那么在前端开发当中也是一项必备的技能。
1.3 响应式开发的原理
       CSS3中的 Media Query （媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。
    超小屏幕：768px以下（移动设备）。
    小屏设备：768px-992px。
    中等屏幕：992px-1200px。
    宽屏设备：1200px以上。

二 Bootstrap框架
2.1 Bootstrap简介
    Bootstrap中文网
    它是由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/html 框架。它提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。
      Bootstrap 是基于 HTML5 和 CSS3 开发的，它在 jQuery 的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分 jQuery 插件。
       Bootstrap 中包含了丰富的 Web 组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
2.2 Bootstrap常用样式
    container类：用于定义一个固定宽度且居中的版心。
    <div class="topbar">
      <div class="container">
        <!--
          此处的代码会显示在一个固定宽度且居中的容器中
          该容器的宽度会跟随屏幕的变化而变化
        -->
      </div>
    </div>

    栅格系统： Bootstrap 中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过 col-xx-xx 的类名控制每一列的占比。
        row类：
            因为每一个列默认有一个15px的左右外边距。
            row 类的一个作用就是通过左右-15px屏蔽掉这个边距。
        <div class="container">
          <div class="row"></div>
        </div>
        col-xx-x类：
            第一个连接符后边写屏幕尺寸，有 xs 超小屏幕 手机(<768px)、 sm 小屏幕 平板 (≥768px)、 md 中等屏幕 桌面显示器(≥992px)、 lg 大屏幕 大桌面显示器 (≥1200px)四种。
            第二个连接符后边表示对应的份数，占12份中的几份。
        <div class="row">
          <div class="col-md-2 text-center"></div>
          <div class="col-md-5 text-center"></div>
          <div class="col-md-2 text-center"></div>
          <div class="col-md-3 text-center"></div>
        </div>

    hidden类：设置在不同的屏幕下隐藏。

    <div class="hidden-xs,hidden-sm,hidden-md,hidden-lg">
    </div>
    text-xx类：设置文字的对齐方式。
    text-center     文本居中
    text-left         文本左对齐
    text-right     文本右对齐
    pull-xx类：设置浮动。
    pull-left         左浮动类
    pull-right     右浮动类
    center-block类：让一个固定宽度的元素居中。

2.3 字体图标
    字体图标：
    @font-face {
      font-family: 'XXX';
      src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
      url('../font/MiFie-Web-Font.svg') format('svg'),
      url('../font/MiFie-Web-Font.ttf') format('truetype'),
      url('../font/MiFie-Web-Font.woff') format('woff');
    }
    字体文件格式：
        eot ： embedded-opentype
        svg ： svg
        ttf ： truetype
        woff ： woff

2.4 轮播图插件 Carousel
    基本的轮播图实现：
    <!--
      以下容器就是整个轮播图组件的整体，
      注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
      bootstrap.js会自动为当前元 素添加图片轮播的特效
    -->
    <div id="轮播图的ID" class="carousel slide" data-ride="carousel">
      <!-- ol标签是图片轮播的控制点 -->
      <ol class="carousel-indicators">
        <!--
          每一个li就是一个单独的控制点
            data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
            data-slide-to属性是指当前的li元素绑定的是第几个轮播项
          注意，默认必须给其中某个li加上active，展示的时候就是焦点项目
        -->
        <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
        <li data-target="#轮播图的ID" data-slide-to="1"></li>
        <!-- ...更多的 -->
      </ol>
      <!--
        .carousel-inner是所有轮播项的容器盒子，
        注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
      -->
      <div class="carousel-inner" role="listbox">
        <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
        <div class="item active">
          <!-- 轮播项目中展示的图片 -->
          
          <div class="carousel-caption">
            <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->
          </div>
        </div>
        <div class="item">
          <!-- ... -->
        </div>
        <!-- ... -->
      </div>
      <!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 -->
      <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
      <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 -->
      <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一张</span>
      </a>
      <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一张</span>
      </a>
    </div>