移动web开发-2

传统百分比布局和flex布局的小瑕疵：

  1. 页面文字大小固定。
  2. 主要针对于宽度布局，高度一般写死。
  3. 屏幕发生变化的时候元素内容不会等比缩放。

那么，页面布局文字能否随着屏幕大小变化而变化？
流式布局和flex布局主要针对于宽度布局，那高度如何设置？
怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

四. 移动端布局：rem布局

1. rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是相对于html元素的字体大小，所有浏览器均已支持rem。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

浏览器的默认html 字体大小font-size=16px;，如果我们不设置，就会使用默认的，为了计算方便，我们也可以设置html 字体大小font-size=10px;。

2. 媒体查询

什么是媒体查询？

媒体查询（Media Query）是CSS3新语法。使用 @media 查询，可以针对不同的媒体类型定义不同的样式，或者说可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询。

媒体查询语法

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

1. 用 @media开头，注意@符号
2. mediatype  媒体类型
3. 关键字 and  not  only
4. media feature 媒体特性必须有小括号包含
  1. mediatype 媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型

  1. 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
  1. 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解下面三个，注意他们要加小括号包含。

媒体查询案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1. 媒体查询一般按照从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为绿色，不用写小于多少 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 和 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位：970px，这个px不能省略 */
    </style>
</head>
<body>
</body>
</html>

上面代码的第二档，我们只写 x>=540，没有写小于多少，为什么没问题呢？因为CSS的层叠性，后面的会覆盖前面的，具体请看👇。

  1. 媒体查询书写规则

为了防止混乱，媒体查询我们一般按照从小到大来写，这样代码更简洁。

媒体查询+rem实现元素动态大小变化

  • rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
  • 媒体查询可以根据不同设备宽度来修改样式
  • 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* html {
            font-size: 100px;
        } */

        /* 从小到大的顺序，不同尺寸设置不同的字体大小 */
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        /* 样式代码使用 rem 单位，这样就可以一份代码适配不同的屏幕尺寸 */
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

根据设备尺寸引入css文件

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表），原理就是直接在link中判断设备尺寸，然后引用不同的css文件。

语法规范：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例：

/* 当屏幕尺寸大于等于320px，引入styleA.css */
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 320px)">

3. Less 的基本使用

CSS弊端

  1. CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
  2. CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
  3. 不方便维护及扩展，不利于复用。
  4. CSS 没有很好的计算能力。
  5. 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

Less介绍

  1. Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器。
  2. Less的出现解决了上面我们说的CSS的弊端。
  3. 作为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
  4. 它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址：http://lesscss.cn/

常见的CSS预处理器：Less、Sass。
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

Less安装

① 通过node.js在线安装Less

1. 安装nodejs，可选择版本(8.0)，网址：<http://nodejs.cn/download/>
2. 检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd）  ---输入“node –v”查看版本即可
3. 先切换到淘宝镜像源，使用cmd命令：npm config set registry https://registry.npm.taobao.org
4. 查看是否切换成功：npm config get registry
5. 通过nodejs在线安装Less，使用cmd命令“sudo npm install -g less”即可
6. 检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

② VSCode安装 Easy LESS 插件

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件，所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

Easy LESS 插件用来把less文件编译为css文件，安装插件后，重新加载 vscode，只要 command+s 保存一下Less文件，会自动生成CSS文件，然后我们再引入这个CSS文件就可以使用了。

Less语法

我们首先新建一个后缀名为 .less 的文件，在这个less文件里面书写less语句。

① Less 变量

变量是指没有固定的值，可以改变的。

@变量名:值;
  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
/* 定义一个粉色的变量 */
@color: pink;

使用示例：

/* 定义一个粉色的变量 */
@color: pink;

/* 错误的变量名  @123color   @color~@# */
/* 变量名区分大小写  @color  和  @Color 是两个不同的变量 */

/* 定义了一个字体为14像素的变量 */
@font14: 14px;

/* 使用变量 */
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

② Less 嵌套

  • less嵌套，子元素的样式直接写到父元素里面就好了。
  • 如果有伪类、伪元素、交集选择器，我们内层选择器的前面需要加&。
  • 解析的时候，如果内层选择器的前面没有&符号，则它被解析为父选择器的后代，如果有&符号，它就被解析为父元素自身。
/* less文件这样写 */

/* 父元素 */
.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 子元素的样式直接写到父元素里面就好了 */
    a {
        /* 如果内层选择器的前面没有&符号，则它被解析为父选择器的后代 */
        color: red;
      
        /* 如果有伪类选择器、伪元素选择器、交集选择器 我们内层选择器的前面需要加& */
      
        /* 链接伪类选择器，解析成 a:hover */
        &:hover {
            color: blue;
        }
        /* 伪元素选择器，解析成 a::before  */
        &::before {
            content: "";
        }
      
        /* 交集选择器，解析成 a.one，选择的是类名为.one的a标签 */
        &.one {
            color: blue;
        }
    }
}

/* 生成的CSS文件 */
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}
.header a::before {
  content: "";
}
.header a.one {
  color: blue;
}

③ Less 运算

任何数字、颜色或者变量都可以参与运算，因为Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/* Less文件这样写 */

@baseFont: 50px;
html {
    font-size: @baseFont; /* 结果为50px */
}
@border: 5px + 5;
div {
    width: 200px - 50; /* 结果为150px */
    height: (200px + 50px ) * 2; /* 结果为500px */
    border: @border solid red; /* 结果为10px */
    background-color: #666 - #222; /* 结果为#444 */
}
img {
    width: 82rem / @baseFont; /* 结果为1.64rem，单位以第一个为准 */
    height: 82rem / @baseFont;
}

/* 生成的CSS文件 */
html {
  font-size: 50px;
}
div {
  width: 150px;
  height: 500px;
  border: 10px solid red;
  background-color: #444444;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

注意：如果两个值之间只有一个值有单位，则运算结果就取该单位。如果是两个不同的单位的值之间的运算，运算结果的单位以第一个值的单位为准。

4. rem适配方案

为了让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备的效果，我们使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放适配的目的。

技术方案：

  1. flex + 媒体查询 + rem
  2. flex + flexible.js + rem

两种方案现在都存在，方案2更简单，现阶段大家无需了解里面的js代码。

方案1：flex + 媒体查询 + rem

1. 设计稿常见尺寸宽度：

设计稿常见尺寸图.png

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以iPhone6、7、8 的 375*667 为准。

2. 动态设置 html 标签 font-size 大小

假设设计稿是750px，假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份），每一份作为html字体大小，这里就是50px，那么在320px设备的时候，字体大小为 320 / 15 就是21.33px，最后设置宽高的时候只需要使用 rem 单位的尺寸就可以实现屏幕适配。

3. 元素大小取值方法

  • 屏幕宽度 / 划分的份数 就是 html 的 font-size 的大小。
  • 页面元素的 rem值 = 页面元素值（px） / html 的 font-size 字体大小。

设计稿以750px屏幕作为基准，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px) {
            html {
                /* 320的屏幕分成 15 等份就是21.33px */
                font-size: 21.33px;
            }
        }
        
        @media screen and (min-width: 750px) {
            html {
                /* 750的屏幕分成 15 等份就是50px */
                font-size: 50px;
            }
        }
        
        /* 元素本身是100*100像素的页面元素，因为设计稿是以750px屏幕作为基准的，所以 100/50=2rem */
        div {
            width: 2rem; /* 100rem / 50 = 2rem; */
            height: 2rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

苏宁首页地址：苏宁首页

  1. 技术选型

方案：我们采取单独制作移动页面方案
技术：flex + 媒体查询 + rem + less
设计图： 本设计图采用 750px 设计尺寸

  1. 搭建文件结构
  1. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
  1. 设置公共common.less文件

① 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要。
② 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px。
③ 划分的份数我们定为 15 等份。
④ 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px。

  1. 新建index.less文件

① 新建 index.less，这里面写首页的样式
② 将刚才设置好的 common.less 引入到 index.less 里面语法如下：

/* 在 index.less 中导入common.less 文件 */
@import “common”

③ 生成index.css 引入到 index.html 里面

  1. body样式
body {
  min-width: 320px;
  width:15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial,Helvetica;
  background: #F2F2F2;
}

代码地址：苏宁移动端（flex + 媒体查询 + rem）

方案2：flex + flexible.js + rem

flexible.js + rem 是简洁高效的rem适配方案。flexible.js是手机淘宝团队出的简洁高效移动端适配库，我们再也不需要写不同屏幕的媒体查询，flexible.js就是监听window的resize事件，然后重新设置html的字体大小，它把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是要确定当前设备的html 文字大小，然后根据 html 文字大小计算 rem 值，比如当前设计稿是 750px，分成 10 份就是 750px/10=75px，里面页面元素rem值就是：页面元素的 px 值 / 75。

github地址：https://github.com/amfe/lib-flexible

  1. 技术选型

方案：我们采取单独制作移动页面方案
技术：flex + flexible.js + rem
设计图：本设计图采用 750px 设计尺寸

  1. 搭建相关文件夹结构
  1. 设置视口标签以及引入初始化样式还有js文件
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

我们页面需要引入这个js文件

/* 在 index.html 中 引入 flexible.js 这个文件 */
<script src=“js/flexible.js”> </script>
  1. body样式
body {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

px转换rem插件：cssrem

因为cssrem中css自动转化为rem是参照默认的html字体大小16，所以我们重新设置html字体大小基准值。

  1. 打开设置
  1. 搜索cssroot，因为我们的设计稿是750px的，并且分成了10等份，所以字体设置为75

注意：因为flexible是默认将屏幕分为10等分，但是当屏幕大于750的时候希望不要再去重置html字体了，所以要自己通过媒体查询设置一下，并且要把权重提到最高。详细代码地址：苏宁移动端（flex + flexible.js + rem）

五. 移动端布局：响应式布局

1. 响应式开发

① 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

② 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果，原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分：

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

但是我们也可以根据实际情况自己定义划分。

③ 响应式导航栏案例

  • 当我们屏幕大于等于768像素，我们给布局容器container宽度为750px，container里面包含8个小li盒子，每个盒子的宽度定为93.75px（750 / 8），高度为30px，浮动一行显示。
  • 当我们屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度，此时里面的8个小li，宽度修改为33.33%，这样一行就只能显示3个小li，剩余下行显示。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .container {
            width: 750px;
            margin: 0 auto;
        }
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
        /* 当屏幕小于767px,一行显示三个li，其他情况设置固定宽度 */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
</html>

2. Bootstrap的介绍

① Bootstrap简介

Bootstrap 来自 Twitter，是一个基于HTML、CSS 和 JavaScript，用于快速开发 Web 应用程序和网站的前端框架。

中文网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐网站：http://bootstrap.css88.com/

② Bootstrap优点

  1. 移动设备优先：自Bootstrap3 开始，框架包含了贯穿于整个库的移动设备优先的样式。
  2. 响应式设计：Bootstrap的响应式 CSS 能够自适应于台式机、平板、电脑和手机，Bootstrap的响应式是基于媒体查询实现的。
  3. 内置组件：Bootstrap提供了一套简洁、直观、强悍的内置组件。
  4. 浏览器支持：所有主流浏览器均支持Bootstrap。
  5. 容易上手：只要您具备 HTML 和 CSS 的基础知识，就可以开始学习Bootstrap。

③ bootstrap版本

3.x.x：目前使用最多，稳定，但是放弃了IE6-IE7，对 IE8 支持但是界面效果不好，偏向用于开发响应式布局移动设备优先的Web项目。
4.x.x：最新版，目前还不是很流行

④ bootstrap基本使用

在现阶段我们还没有接触js相关课程，所以我们只考虑使用它的样式库。控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

Bootstrap 使用四步曲：

  1. 创建文件夹结构

  1. 创建 html 骨架结构

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
  <title>阿里百秀</title>

  <!-- 必须引入bootstrap 样式文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
  <!-- 解决ie9以下浏览器对 css3 Media Query 的不识别 -->
  <!-- 下面4行不是注释,是代码,意思是如果是 IE9 及以下浏览器,就引入如下文件,两个文件的作用如上: -->
  <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <![endif]-->
  <!-- 引入jquery js文件 -->
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>你好，世界！</h1>
  <!-- bootstrap自带的按钮，当然你也可以修改它的样式，但是要注意权重 -->
  <button type="button" class="btn btn-danger">登录</button>
  <span class="glyphicon glyphicon-search"></span>
</body>
</html>

  1. 必须引入相关样式文件

    <!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  2. 书写内容

    直接拿 Bootstrap 预先定义好的样式来使用。
    修改 Bootstrap 原来的样式，注意权重问题。
    学好 Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果。

⑤ bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器，bootstrap预先定义好了两个有此用处的类。

.container类

  • 响应式布局的容器 固定宽度
  • 大屏 ( >=1200px) 宽度定为 1170px
  • 中屏 ( >=992px) 宽度定为 970px
  • 小屏 ( >=768px) 宽度定为 750px
  • 超小屏 (100%)

使用这个类之后，再也不用我们写媒体查询的代码了，bootstrap会自动改变container容器的宽度，下面我们主要学习.container类。

.container-fluid类

  • 流式布局容器 百分百宽度
  • 占据全部视口（viewport）的容器
  • 适合于单独做移动端开发

⑥ bootstrap栅格系统

1. 栅格系统简介

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

2. 栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

  • 行（row）必须放到container布局容器里面，这个和table标签的row有点像。
  • 我们实现列的平均划分，需要给列添加类前缀，xs：extra small，超小；sm：small，小；md：medium，中等；lg large，大。
  • 每一列默认有左右15像素的 padding，如果不想要可以去掉。
  • 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"。
  • 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
    ① 如果孩子的份数相加等于12，则孩子能占满整 container 的宽度
    ② 如果孩子的份数相加小于12，则占不满整个container 的宽度，会有空白
    ③ 如果孩子的份数相加大于12，则多于的那一列会另起一行显示

3. 列嵌套

栅格系统可以将内容再次嵌套，简单理解就是一个列内再分成若干份小列。

我们列嵌套最好加1个行 row 这样可以取消父元素的padding值，而且高度自动和父级一样高。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
            <div class="row">
                <div class="col-md-6">a</div>
                <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

4. 列偏移 (.col-md-offset-*)

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边（margin）。

<div class="row">
    <!-- 左侧占4份，右侧占4份，右侧盒子往右偏移4份 -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

5. 列排序 (.col-md-push-*)、(.col-md-pull-*)

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
    <!-- 把左侧盒子推到右边，把右侧盒子拉到左边 -->
    <!-- 简单记忆：因为默认是左右排列的，所以左到右是 push，右到左是 pull -->
    <div class="col-lg-4 col-lg-push-8">左侧</div>
    <div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>

6. 隐藏和显示 (hidden-xs)、(visible-xs)

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

与之相反的是，visible-xs、visible-sm、visible-md、visible-lg 是显示某个界面内容。

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <!-- 在大屏才会显示 -->
            <span class="visible-lg">我会显示哦</span>
        </div>
        <div class="col-xs-3">2</div>
        <!-- 进入中等屏幕和超小屏幕,这一列隐藏 -->
        <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
        <div class="col-xs-3">4</div>
    </div>
</div>

Bootstrap 其他 按钮、表单、表格 请参考 Bootstrap 文档。

3. 阿里百秀案例制作

1. 技术选型

方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图：本设计图采用 1280px 设计尺寸

2. 页面布局分析

3. 屏幕划分分析

屏幕缩放发现，中屏幕和大屏幕布局是一致的，因此我们列定义为col-md-*就可以了，md是大于等于970以上的。小屏幕和超小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局。

4. 项目结构搭建

Bootstrap 使用四步曲：

  1. 创建文件夹结构
  2. 创建 html 骨架结构
  3. 引入相关样式文件
  4. 书写内容

5. container宽度修改

因为本效果图采取1280的宽度，而Bootstrap里面container宽度最大为1170px，因此我们需要手动改下container最大宽度，当宽度大于1280px的时候，把宽度设置为1280px。

/* 利用媒体查询修改 container宽度适合效果图宽度  */
@media (min-width: 1280px) { 
  .container { 
       width: 1280px; 
   } 
 }

阿里百秀案例代码地址：阿里百秀案例

总结：移动端web开发主流方案

  1. 移动端单独制作（主流）。移动端和 PC 端各一份代码，移动端布局方式如下：

    ① 百分比布局（京东移动端案例）
    ② flex 伸缩布局（携程网移动端案例）
    ③ flex+媒体查询+rem（苏宁移动端案例）
    ④ flex+flexible.js+rem（苏宁移动端案例）

  2. 响应式页面兼容移动端。移动端和 PC 端共用一份代码，响应式的布局移动端和 PC 端会响应式变化从而适应不同的屏幕大小。

    ① 媒体查询
    ② bootstarp（阿里百秀案例、三星手机官网）

总结：从传统的百分比布局到flex布局，最后到 flex + 媒体查询 + rem，我们发现最终的方案就是 flex + 媒体查询 + rem，因为上面的 flexible.js 其实就是代替我们写了一些媒体查询的js代码。

补充：最近又出现了新的单位，vw和vh，分别代表视口宽度、视口高度，比如1vw = 1%的视口宽度。rem、vw和vh桌面端仅在IE9+支持，如果需要支持IE8，只能使用px，但是在移动端rem、vw和vh都支持的比较好，可以在生产使用。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,552评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,666评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,519评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,180评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,205评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,344评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,781评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,449评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,635评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,217评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,775评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2赞 341

推荐阅读更多精彩内容

  • 前端学习笔记五-移动Web网页开发
    一、流式布局 1.1 meta标签 最标准的viewport设置 视口宽度和设备保持一致 视口的默认缩放比例1.0...
    AizawaSayo阅读 991评论 0赞 0
  • 移动WEB开发
    了解移动端基础 浏览器移动端的浏览器大多都是基于webkit修改的内核，国内尚无自主研发的内核。所以，兼容移动端主...
    甄子健阅读 158评论 0赞 0
  • 移动web开发
    一、屏幕适配问题 解决方案 流式布局 :就是百分比布局，非固定像素，内容像两侧填充，理解成流动的布局，称为流式布局...
    你带来了我的快乐阅读 190评论 0赞 1
  • 【前端】05 - 移动web开发之rem布局
    文字大小随屏幕大小的改变而改变？流式布局和flex布局主要针对宽度布局，那高度如何设置？怎么样让屏幕发生改变的时候...
    itlu阅读 407评论 0赞 1
  • 移动 web 开发 —— rem 布局
    1. rem 基础 rem 单位 rem（root em）是一个相对单位，类似于 em，em 是父元素字体大小。 ...
    jovelin阅读 299评论 0赞 0