前端之路（移动web篇）

移动web基础

移动端开发现状

• 移动web开发指的是需要适配移动设备的网页开发

• 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术

• 移动web开发与pc端web开发的区别是什么？

移动端的浏览器与pc端不同

谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。
​
因此在移动端，css3属性只需要加webkit前缀即可。

移动端设备尺寸不一样(尺寸非常多，碎片化很严重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

移动端开发分类

• 原生app（native app）

• 混合app（Hybrid app）

• web应用（webApp）

原生app（native app）

原生app是基于操作系统的开发，比如安卓，ios，windows phone,他们只能在各自的操作系统上运行。

优点：

1. 可以访问操作系统，获取更多的资源（gps，摄像头，传感器，麦克风等）

2. 速度快，性能高，用户体验好

3. 可以离线使用

缺点：

1. 开发成本高

2. 需要安装和更新，更新与发布需要审核。

Web App

Web应用使用H5C3开发页面，为浏览器设计的基于web的应用，可以在各种智能设备的手机浏览器上运行。不需要安装即可运行。

优点：

1. 支持设备广泛

2. 开发成本低（使用）

3. 可以随时上线与更新，无需审核

缺点：

1. 用户体验极度依赖网速

2. 要求联网

3. 无法获取手机的资源（gps, 传感器等）

混合app（Hybrid App）

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App。（淘宝、京东、手机百度）

Hybird App说白了就是使用了Native app的壳，里面其实还是HTML5页面。

优点：

1. 开发成本和难度更低，兼容多个平台

2. 也可以访问手机的操作系统资源。

3. 更新维护更方便

缺点：

1. 用户体验相比原生app稍差。

2. 性能依赖于网速

总结：

三种开发各有优缺点，具体用什么需要根据实际情况而定，比如预算，app注重功能还是内容等。

屏幕与分辨率

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

屏幕尺寸

通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示

1英寸 = 2.54厘米

屏幕分辨率

分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示,相同尺寸下分辨率越高，越清晰。

像素：指计算机显示设备中的最小单位，即一个像素点的大小。

像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。

像素密度ppi(了解)

PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数

利用 勾股定理 我们可以计算得出PPI

PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。

结论：当PPI 越大，展示的画质越精细。

设备独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态,给我们开发带来的问题

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素,也叫（设备无关像素），在IOS设备上叫PT，Android设备上叫DP，在css中，叫PX。

pt
dp
px:   css像素

获取设备的像素比

window.devicePixelRatio  //物理像素与CSS像素的比值

2倍图与3倍图（重要）

以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.

把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

设备像素比devicePixelRatio：即像素的压缩比例

结论 ：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。

视口viewport（重要）

问题：一个电脑上的网站，在手机端访问，效果是什么样的？
​
​
1. 在手机端，html的大小都是980px，为什么？
这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，
移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。
为了解决这个问题，移动端html的大小直接就定死成了980px（因为早起的pc端网站版心就是980px居多）。
​
​
2. 视口
在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，
但是在移动端，多出来了一个视口的概念（乔布斯）,视口说白了就是介于浏览器与html之间的一个东西，
视口的宽度默认定死了980px，因此html的宽度默认就是980px，视口的特点是能够根据设备的宽度进行缩放。
​
​
3. 视口设置。
对于现在的移动端页面来说，视口默认为980px肯定不合适，因为设备宽度不够的话，视口会进行缩放，导致页面展示效果不好看。

视口参数设置

//width 设置视口的宽度
//width=device-width   设置视口宽度为设备的宽度（常用）。
​
//initial-scale 设置初始缩放比例
//initial-scale=1.0  表示不缩放
​
//user-scalable 设置是否允许用户缩放
//user-scalable=no  不允许用户缩放
​
//maximum-scale  设置允许的最大缩放比例
//maximum-scale=1.0  可以不设置，因为都禁止用户缩放了。
​
//minimum-scale 设置允许最小缩放比
//minimum-scale=1.0  不设置，因为都禁用用户缩放了。
​
​
//标准写法：
//快捷键：  meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

流式布局

移动端的特点

• 手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新

• 手机端屏幕比较小，能够放的内容比较少。

问题：布局的时候怎么解决屏幕大小不一致的问题？

• PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东

• 移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

流式布局的特征：

• 宽度自适应，高度写死，并不是百分百还原设计图

• 图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。

• 一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化

流式布局无法做到所有设备都非常逼真的还原设计图，有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式，比较简单，需要掌握（携程、京东)

经典的流式布局

//1. 左侧固定，右侧自适应
//2. 右侧固定，左侧自适应
//3. 两侧固定，中间自适应（圣杯布局，双飞翼布局）
//4. 等分布局

 

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

• 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。

• 通常的做法是针对移动端单独做一套特定的版本。

• 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）

• 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

响应式开发现状：

• 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）

• 在新建站点 上采用响应式开发的越来越多。

• 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简洁，加载快	代码相对复杂，加载慢

媒体查询

媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

媒体查询的使用

需求：

<!--
需求：
    大屏设备(>1200px)   版心：1170px   背景色：红色
    中屏设备(992-1200)  版心：970px    背景色：蓝色
    小屏设备(768-992)   版心：750px    背景色：黄色
    超小屏设备(<768px)  版心：100%     背景色：绿色
-->

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}
​
/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}
​
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}
​
@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}
​
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

 

bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

• 组件简洁大方、代码规范精简、界面自定义性强。

• Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

• Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

• 有自己的生态圈，不断的更新迭代

• 提供了一套简洁、直观、强悍的组件

• 标准化的HTML+CSS编码规范

• 让开发更简单，提高了开发效率。

• 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

• 2.x.x 停止维护

  • 优点：兼容性好

  • 缺点：代码不够简洁、功能不够完善

• 3.x.x 目前使用最多

  • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目

  • 缺点：放弃了IE67，对IE8支持但是界面效果不友好

• 4.x.x 测试阶段

基本模板

目录结构说明

<!DOCTYPE html>
<!--使用HTML5文档，使用中文简体-->
<html lang="zh-CN">
<head>
  <!--meta1. 使用utf-8编码-->
  <meta charset="utf-8">
  <!--meta2. 当前页面在在IE浏览器访问时，使用最新的ie浏览器内核进行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--meta3. 视口设置-->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ -->
  <title>bootstrap基本模板</title>
  
  <!--引入bootstrap的核心样式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- html5shiv是用来解决IE8以下浏览器不支持HTML5语义化标签的问题 -->
  <!--respond是用来解决IE8以下浏览器不支持媒体查询的问题，注意：respond不支持file协议打开-->
  <!--条件注释：IE浏览器专属-->
  <!--[if lt IE 9]>
  <script src="lib/html5shiv/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
​
<!--bootstrap依赖与jquery，因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

全局样式

normalize.css

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

官网

github网址

normalize的特点：

• 保护有用的浏览器默认样式而不是完全去掉它们

• 一般化的样式：为大部分HTML元素提供

• 修复浏览器自身的bug并保证各浏览器的一致性

• 优化CSS可用性：用一些小技巧

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Normalize.css与CSS reset区别

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

栅格系统，也叫网格系统

• .row用于抵消.container容器的15px的padding值

• 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-6	在大屏幕及生效，占1/2

 

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示
推荐使用hidden相关的属性

其他

bootstrap内置的东西是在太多，不可能每一个都详细的讲，但是bootstrap文档简洁明了，当我们用到了相关的东西的时候，再来详细的进行讲解。

Less简介

CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

(less css预处理器)

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。

中文网: http://lesscss.cn/

LESS安装

安装less，需要先安装node，因为less环境是依赖与node环境的。

安装node

1. 下载node安装包（已经提供）

2. 双击安装（不大, 直接安装在C盘，方便查找）

3. 在cmd命令行中输入node -v以及npm -v查看是否安装成功

基本使用步骤

在管理员模式cmd命令行中输入以下代码:需要联网

npm install -g less  //-g:全局安装，意味这装了一次，以后就可以直接用less

等待安装完成,然后输入以下命令

lessc -v   //查看less的版本

less的编译

如何把less文件变成css文件

使用lessc命令

lessc index.less index.css

Less语法

less初体验

新建一个less文件，输入以下代码:

@color:red;
p {
  color:@color;
}

可以看到，webstorm自动的帮我们生成了对应的css文件。

变量

注释

/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

变量

@charset "UTF-8";
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}
​
div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

mixin混入

混入样式类

@charset "UTF-8";
//混入
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}
​
.btn_border {
  border: 1px solid #ccc;
}
​
.btn_danger {
  background-color: red;
}
​
.btn_block {
  display: block;
  width: 100%;
}
​
//混入其他类的样式。
.my_btn {
  .btn();
  .btn_block();
  .btn_border();
  .btn_danger();
}

编译后的css

@charset "UTF-8";
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}
.btn_border {
  border: 1px solid #ccc;
}
.btn_danger {
  background-color: red;
}
.btn_block {
  display: block;
  width: 100%;
}
.my_btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  background-color: red;
}

缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。

混入函数

不带参数的函数

@charset "UTF-8";
​
//不会被编译
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

带参数的函数

.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函数定义了参数，调用的时候必须传入参数，否则会报错
  .btn_border();
  //传入参数，就不会报错
  .btn_border(10px);
}

带默认值的函数

.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因为有默认值，所以不会报错
  .btn_border();
  //传入参数，会覆盖1px，也不会报错
  .btn_border(10px);
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

• 使用伪类的时候 可以使用& 表示自己

@charset "UTF-8";
.wjs_header {
  border-bottom: 1px solid #ccc;
}
.wjs_header .header_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.wjs_header .header_item:first-child {
  border-left: none;
}

导入

@charset "UTF-8";
​
@import "01-variable";
​
@import "02-maxin";
​
@import "03-mixin02";
​
@import "04-book";

模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。

函数（运算）

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

http://www.1024i.com/demo/less/reference.html

REM

各种布局特征的对比

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。

通常解决方案如下：

• 流式布局：可以让各种屏幕都适配，只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发效率高, 成本低, 目前使用流式布局的公司还是非常多的，比如 亚马逊 、京东 、携程

• 响应式布局：国内很少有大型网站使用，主要原因是工作大，可维护性不好 。所以一般都是中小型的门户或者博客类站点会采用响应式，因为这样可以节约成本。

• rem布局：rem能够适配所有的屏幕, 目前使用rem布局的有：淘宝 、 苏宁

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。

em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。

html{
  font-size:16px;
}
body {
  font-size:20px;
}
div.em {
  /*em的计算方式参照的当前元素的font-size，如果不设置，默认继承自父盒子*/
  width:2em;
  height:2em;
  background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
  width:2rem;
  height:2rem;
  background-color:blue;
}

rem与响应式

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

rem与媒体查询

使用rem配合媒体查询可以适配多个终端

    @media (min-width: 320px) {
      html {
        /*font-size: 100/750 * 320px*/
        font-size: 42.67px;
      }
    }
    @media (min-width: 375px) {
      html {
        font-size: 50px;;
      }
    }
    @media (min-width: 414px) {
      html {
        font-size: 55.2px;;
      }
    }
    @media (min-width: 480px) {
      html {
        font-size: 64px;;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 85.33px;
      }
    }
    @media (min-width: 750px) {
      html {
        font-size: 100px;;
      }
    }

优点：使用媒体查询适配，速度快。

缺点：适配多个终端时，需要添加响应的代码。

rem与javascript

通过javascript获取可视区的宽度，计算font-size的值，也可以适配多个终端。

var base = 100;
var design = 750;
​
function responsive() {
  var pageWidth = window.innerWidth;
​
  if ( pageWidth <= 320 ) {
    pageWidth = 320;
  }
​
  if ( pageWidth >= 750 ) {
    pageWidth = 750;
  }
​
  var size = base / design * pageWidth;
  document.documentElement.style.fontSize = size + "px";
}
​
responsive();
window.addEventListener("resize", responsive);

优点：直接适配所有的终端

缺点：必须在页面加载之前设置html的font-size值，不然会出现文字大小调动的情况。

swiper插件

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

swiper中文网