6移动开发

1. 移动开发之rem适配布局
   1. 目标：
      1. 能够使用rem单位
      2. 能够使用媒体查询得基本语法
      3. 能够使用Less的基本语法
      4. 能够使用Less中的嵌套
      5. 能够使用Less中的运算
      6. 能够使用2种rem适配方案
      7. 能够独立完成苏宁移动端首页
2. 移动开发之rem适配布局
   1. 方案：
      1. 页面布局文字能否随着屏幕大小变化而变化
      2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？
      3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放
3. rem基础
   1. rem单位
      1. rem（root em）是一个相对单位，类似于em，em是父元素字体大小。
      2. 不同的是rem的基准是相对于html元素的字体大小
         1. 比如，根元素（html）设置font-size=12px；非根元素设置width: 2rem;则换成px就是24px;
4. 媒体查询
   1. 什么是媒体查询
      1. 媒体查询（Media Query）是CSS3新语法。
         1. 使用@media查询，可以针对不同的媒体类型定义不同的样式。
         2. @media可以针对不同的屏幕尺寸设置不同的样式。
         3. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
         4. 目前针对很多苹果手机、android手机，平板等设备都用得到多媒体查询
   2. 语法规范
      1. @media mediatype and | not | only (meida feature) {

CSS-Code;

}

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

1. mediatype查询类型
   1. 将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

1. 关键字
   1. 关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
      1. and: 可以将多个媒体特性连接到一起，相当于“且”的意思
      2. not: 排除某个媒体类型，相当于“非”的意思，可以省略。
      3. noly: 指定某个特定的媒体类型，可以省略
2. 媒体特性
   1. 每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，我们暂且了解三个。注意他们要加小括号包含。

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度（当宽度大于等于这个属性值时显示什么样式）
max-width	定义输出设备中页面最大可见区域宽度（当宽度小于这个属性值时显示什么样式）

1. 为了防止混乱，媒体查询我们要按照从小到大或则从大到小的顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更简洁
2. 媒体查询+rem实现元素动态大小变化
   1. rem单位是跟着html（根标签的字体大小）来走的，有了rem页面元素可以设置不同大小尺寸
   2. 媒体查询可以根据不同设备宽度来修改样式
   3. 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化
3. 媒体查询引入资源
   1. 当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。原理，就是直接在link中判断设备的尺寸，然后引入不同的css文件。
   2. 语法：

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

• 1. 媒体查询最好的方法是从小到大
  2. 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件
     1. 案例：

<link rel="stylesheet" media="screen and (max-width:800px)" href="css/index2-min.css">

<link rel="stylesheet" media="screen and (min-width:800px)" href="css/index2-max.css">

1. Less基础
   1. 维护css的弊端
      1. CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
         1. CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
         2. 不方便维护及扩展，不利于复用
         3. CSS没有很好的计算能力
         4. 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
2. Less介绍
   1. Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器
   2. 作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
   3. 它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的缩写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情
   4. Less中文网站：http://lesscss.cn/
   5. 常见的CSS预处理器：Sass、Less、Stylus
   6. 一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。
3. Less安装
   1. 安装nodejs.可选择版本(8.0)，网址：http://nodejs.cn/download/
   2. 检查是否安装成功，使用cmd命令（win10是window + R 打开 运行输入cmd）---输入“node -v“ 查看版本即可
   3. 基于nodejs在线安装Less，使用cmd命令“npm install -g less“即可
   4. 检查是否安装成功，使用cmd命令“lessc -v“查看版本即可
4. Less使用
   1. 我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。
   2. Less变量
   3. Less编译
   4. Less嵌套
   5. Less运算
5. Less变量
   1. 变量是指没有固定的值，可以改变的，因为我们CSS中的一些颜色和数值等经常使用。
   2. 语法：
      1. 定义变量：
         1. @变量名: 值；
      2. 使用变量：
         1. 样式属性：@变量名；
   3. 变量命名规范
      1. 必须有@为前缀
      2. 不能包含特殊字符
      3. 不能以数字开头
      4. 大小写敏感
6. Less编译
   1. 本质上，less包含一套自定义的语法及解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译成对应的CSS文件。
   2. 所以，我们需要把我们的less文件，编译成为css文件，这样我们的html页面才能使用。
   3. Vscode Less插件
      1. Easy LESS插件用来把less文件编译为css文件
      2. 安装完插件，重新加载下vscode.只要保存一下less文件，会自动生成CSS文件。
7. Less嵌套
   1. Less嵌套 子元素的样式直接写到父元素里面就好了
   2. 如果遇见（交集 | 伪类 | 伪元素选择器）
      1. 内层选择器的前面没有&符号，则它被解析为父元素的后代；
      2. 如果有&符号，它被解析为父元素自身或父元素的伪类。
   3. 案例：

@blue:blue;

@pink:pink;

.box{

    overflow: hidden;

    width: 500px;

    height: 500px;

    background-color: @blue;

    .box-list{

        margin: 100px auto;

        width: 200px;

        height: 200px;

        background-color: @pink;

        text-align: center;

        line-height: 200px;

    }

}

1. Less运算
   1. 任何数字、颜色或则变量都可以参与运算。就是less提供了加(+)、减(-)、乘(*)、除(/)算术运算
   2. 注意：
      1. 乘号(*)和除号(/)的写法
      2. 运算符中间左右有个空格隔开1px + 5
      3. 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
      4. 如果两个值之间只有一个值有单位，则运算结果就取该单位。
      5. 进入4.0版本后， 除法运算符如果在括号外面，不执行除法运算， 如果在小括号内可以看做是除法运算， 或者 使用 ./ 强制做除法运算
2. rem适配方案
   1. 让一些不能等比自适应的元素，达到当前设备尺寸发生改变的时候，等比例适配当前设备。
   2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
3. rem实际开发适配方案
   1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小：（媒体查询）
   2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
4. rem适配方案技术使用（市场主流）
   1. 技术方案1：
      1. less
      2. 媒体查询
      3. rem
   2. 技术方案2（推荐）
      1. flexible.js
      2. rem
   3. 总结：
      1. 两种方案现在都存在
      2. 方案2更简单，现阶段大家无需了解里面的js代码。
5. Rem+媒体查询+less技术
   1. 设计稿常见尺寸宽度

设备	常见宽度
iPhone4.5	640px
Iphone678	750px
android	常见320px、360px、375px、384px、400px、414px、500px、720px、大部分4.7到5寸的安卓设备为720px

• 1. 一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃终端屏或对其优雅降级，牺牲一些效果，现在基本以750为准
  2. 元素大小取值方法
     1. 最后的公式：页面元素的rem值=页面元素值(px) / (屏幕宽度 / 划分的份数)
     2. 屏幕宽度/划分的份数 就是html font-size的大小
     3. 或则：页面元素的rem值=页面元素值（px）/ html font-size字体大小

1. 苏宁网首页案例制作
   1. 技术选型
      1. 方案：我们采取单独制作移动页面方案
      2. 技术：布局采取rem适配布局（less+rem+媒体查询）
      3. 设计图：本设计图采用750设计尺寸
   2. 搭建相关目录文件夹结构
      1. images
      2. css
      3. upload
      4. index.html
   3. 设置视口标签以及引入初始化样式

<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文件
     1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他网页也需要
     2. 我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
     3. 划分的份数我们定位15等分
     4. 因为我们px端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面
  2. 新建index.less文件
     1. 新建index.less 这里面写首页的样式
     2. 将刚才设置好的common.less引入到index.less里面 语法如下
        1. @import "common";
     3. 生成index.css引入到index.html里面

1. 简洁高效的rem适配方案flexible.js
   1. 技术方案1
      1. less
      2. 媒体查询
      3. rem
   2. 技术方案2（推荐）
      1. flexible.js
      2. rem
2. 简洁高效的rem适配方案flexible.js
   1. 手机淘宝团队出的简洁高效移动端适配库
   2. 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
   3. 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
   4. 我们要做的，就是确定好我们当前设备的html文字大小就可以了
   5. 比如当前设计稿750px，那么我们只需要把html文字大小设置为75px(750px / 10)就可以里面页面元素rem值：页面元素的px值 / 75 剩余的，让flexible.js来去算
   6. Github地址：https://github.com/amfe/lib-flexible
3. 使用适配方案2制作苏宁移动端首页
   1. 技术选型
      1. 方案：我们采取单独制作移动页面方案。
      2. 技术：布局采取rem适配布局2（flexible.js+rem）
      3. 设计图：本设计图采用750px设计尺寸
   2. 搭建相关文件夹结构
      1. css
      2. images
      3. js
      4. upload
      5. index.thml
   3. 设置视口标签以及引入初始化样式还有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">

<script src="js/flexible.js"></script>

• 1. Vscode px转换rem插件cssrem
     1. 0.07版本
     2. Vscode设置：
        1. 点击“文件”——>点击“首选项”——>点击“设置”——>在Cssrem: Root Font Size下面的输入框中，将默认值16改为我们html根标签的font-size大小
        2. 在settings.json文件中输入“cssrem.rootFontSize”: 75

1. 移动开发之响应式布局
   1. 目标：
      1. 能够说出响应式原理
      2. 能够使用媒体查询完成响应式导航
      3. 能够使用Bootstrap的栅格系统
      4. 能够使用bootstrap的响应式工具
      5. 能够独立完成阿里百秀首页案例
   2. 目录：
      1. 响应式开发
      2. Bootstrap前端开发框架
      3. Bootstrap栅格系统
      4. 阿里百秀首页案例
2. 响应式开发
   1. 响应式开发原理：
      1. 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

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

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

1. 平时我们的响应式尺寸划分
   1. 超小屏幕（手机，小于768px）:设置宽度为100%
   2. 小屏幕（平板，大于等于768px）：设置宽度为750px
   3. 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
   4. 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
2. 快速开发
   1. Bootstrap前端开发框架
3. Bootstrap前端开发框架
   1. Bootstrap简介
      1. Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得web开发更加快捷。
      2. 中文官网：https://www.bootcss.com/
      3. 官网：http://getbootstrap.com/
      4. 推荐使用：http://bootstrap.css88.com/
   2. 最流行的前端框架，用于在web上开发响应式，移动优先项目。
      1. 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
   3. 优点：
      1. 标准化的html+css编码规范
      2. 提供了一套简洁、直观、强悍的组件
      3. 有自己的生态圈，不断的更新迭代
      4. 让开发更简单，提高了开发的效率
   4. 版本
      1. 2.x.x:停止维护，兼容性好，代码不够简洁，功能不够完善
      2. 3.x.x:目前使用最多，稳定，但是放弃了IE6-IE7.对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的web项目
      3. 4.x.x：最新版，目前还不是很流行
4. Bootstrap使用
   1. 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
   2. 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
   3. Bootstrap使用四部曲：
      1. 创建文件夹结构
      2. 创建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，user-scalable=0">

    <!--[if lt IE 9]-->

    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <!-- 解决ie9以下浏览器对css3Media Query的不识别 -->

    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <!--[endif]-->

    <title>bootstrap使用</title>

</head>

<body>

</body>

</html>

• • 1. 引入相关样式文件
       1. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    2. 书写内容
       1. 直接拿bootstrap预先定义好的样式来使用
       2. 修改bootstrap原来的样式，注意权重问题
       3. 学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果。

1. Bootstrap前端开发框架
   1. 布局容器
      1. Bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类
         1. .container类
            1. 响应式布局的容器 固定宽度
            2. 大屏（>= 1200px）宽度定位1170px
            3. 中屏（>=992px）宽度定位970px
            4. 小屏（>=768px）宽度定位750px
            5. 超小屏（100%）
         2. .container-fluid类
            1. 流式布局容器百分百宽度
            2. 占据全部视口（viewport）的容器
            3. 适合于单独做移动端开发
2. Bootstrap栅格系统
   1. 栅格系统英文为“grid systems”，也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
   2. Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
   3. Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份
3. 栅格选项参数
   1. 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

	超小屏幕（手机）<768px	小屏设备(平板) =768ox	中等屏幕(桌面显示器)>=992px	宽屏设备（大桌面显示器）>=1200px
.container最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(column)数	12

• 1. 行（row）必须放到container布局容器里面
  2. 我们实现列的平均划分，需要给列添加类前缀
  3. 按照不同屏幕划分为1~12等份
  4. 行（row）可以去除父级容器作用的15px的边距
  5. xs-estra small：超小； sm-small: 小； md-medium: 中等；lg-large：大；
  6. 列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
  7. 每一列默认有左右15像素的padding
  8. 可以同时为一列指定多个设备的类名，以便划分不同份数 例如class=“col-md-4 col-sm-6”
  9. 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度
  10. 如果孩子的份数相加 小于 12 则占不满整个container 的宽度 会有空白
  11. 如果孩子的份数相加 大于12 则超出12份的元素全部换行显示

1. Bootstrap栅格系统列嵌套
   1. 栅格系统内置的栅格系统将元素再次嵌套。简单理解就是一个列内再分成若干小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经纯在的.col-sm-*元素内
   2. 我们列嵌套最好加1个行row 这样可以取消父元素的padding值 而且高度自动和父亲一样高
2. Bootstrap栅格系统列偏移
   1. 使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)

  <div class="row">

            <div class="col-lg-4 col-md-3">左</div>

            <div class="col-lg-4 col-md-3 col-lg-offset-4">右</div>

        </div>

1. Bootstrap栅格系统列排序
   1. 通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序

<div class="row">

            <div class="col-lg-4 col-lg-push-8">左侧</div>

            <div class="col-lg-8 col-lg-pull-4">右侧</div>

        </div>

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

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

 <div class="row">

<div class="col-lg-3 col-md-3 col-xs-3 hidden-xs">超小屏幕隐藏</div>

<div class="col-lg-3 col-md-3 col-xs-3 hidden-sm">小屏隐藏</div>

<div class="col-lg-3 col-md-3 col-xs-3 hidden-md">中屏隐藏</div>

  <div class="col-lg-3 col-md-3 col-xs-3 hidden-lg">大屏隐藏</div>

 </div>

• 1. 与之相反的是，visible-xs visible-sm visible-md visible-lg是显示页面内容

1. 阿里百秀首页案例
   1. 技术选型
      1. 方案：我们采取响应式页面开发方案
      2. 技术：bootstrap框架
      3. 设计图：本设计图采用1280px设计尺寸
   2. 页面布局
   3. 屏幕划分
      1. 屏幕缩放发现 中屏幕和大屏幕布局 是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的
      2. 屏幕缩放发现 小屏幕 布局发生变化，因此我们需要为小屏幕根据需求改变布局
      3. 屏幕缩放发现 超小屏幕布局又发生变化，因此我们需要为 超小屏幕根据需求改变布局
      4. 策略：我们先布局 md以上的pc端布局，最后根据实际需求再修改小屏幕和超小屏幕的特殊布局样式
   4. 页面制作
      1. Bootstrap使用四部曲
         1. 创建文件夹结构
         2. 创建html骨架结构
         3. 引入相关样式文件
         4. 书写内容
      2. container宽度修改
         1. 因为本效果图采取1280的宽度，而bootstrap里面container宽度 最大为1170px，因此我们需要手动改一下container宽度
2. 移动端布局总结
   1. 移动端主流方案
      1. 单独制作移动端页面（主流）
      2. 响应式页面兼容移动端（其次）
   2. 移动端技术选型
      1. 流式布局（百分比布局）
      2. flex弹性布局（推荐）
      3. rem适配布局(推荐)
      4. 响应式布局
      5. 建议：我们选取一种主要技术选型，其他技术作为辅助，这种混合技术开发