移动端开发——[12]

一、前置知识

1.1 移动端开发程序

• M站的开发（Web app）

​ 优点：推广方便，引流容易

​ 缺点：体验感，不是很流畅。

​ 进入方式：扫描二维码，嵌入公众号，微信分享，移动端浏览器。

• App 安卓 ，IOS，混合式开发H5。

• 小程序：微信小程序、支付宝、百度、360、抖音…（生态圈）

• H5/微信公众号：订阅号，服务号

uni-app？

一站式开发 M站、所有平台小程序、APP。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.2 视口

<meta name="viewport" content="width=device-width, initial-scale=1.0,maxnum-scale=1.0,user-scalable=0" />

以上代码常见于移动端设置，他的作用是使网页的宽度自动适应手机屏幕的宽度。

下面对每个属性的详细说明：

属性名	取值	描述
width	device-width或正整数	定义视口的宽度，单位为像素，一般为device-width：表示宽度为设备屏幕的宽度
height	device-width或正整数	定义视口的高度，单位为像素，一般不用写
initial-scale	[0.0-10.0]	定义初始缩放值，一般设置为1.0
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

注意：

viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的

当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度

单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性

即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放

---

可参考文档<< 什么是视口.doc>>了解视口详细的说明

1.3 二倍图

在实际开发中，当一个50 ×50像素的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度。

当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。

1.4 什么是Normalize

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

1.5 移动端开发选择

响应式页面，（媒体查询）通过判断屏幕的宽度来改变样式，需要花费精力去调整兼容性

单独制作，通常情况下，网址域名前加m可以打开移动端

制作方式/布局方式：

1、流式布局（百分比）

2、rem布局（下节课）

3、flex布局（强烈推荐使用）

1.6 Flex 布局

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 +position属性+ float属性。

它对于那些特殊布局非常不方便，比如，我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法，如果在盒子内部垂直居中，实现起来就非常不易。

W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。

二、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

三、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

四、容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。（reverse：颠倒）

.box {
  flex-direction: column | column-reverse | row | row-reverse ;
}

它有4个值。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中心点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

五、项目的属性

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.item {
  flex-grow: <number>; /* default 0 */
}

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

.item {
  flex-shrink: <number>; /* default 1 */
}

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

六 网页布局CSS单位介绍

6.1PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX主要特点是：

• IE无法调整那些使用px作为单位的字体大小；
• 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
• Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

6.2 EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

6.3 REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

在自适应制作稿中，我们经常会看到rem和em这两个单位，rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定

6.4 rem 单位如何转换为像素值

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

6.5 px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

七 什么是flexible.js?

下载地址：https://github.com/amfe/lib-flexible/tree/2.0

7.1 flexible.js简介

flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。

7.2 使用flexible.js步骤

• 将flexible.js复制到我们项目的文件夹中，并且在html中引入

八 移动端事件

8.1 移动端事件

PC端事件：鼠标事件 键盘事件

移动端事件：触摸事件

随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseover等， 已经无法满足移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。

主要事件类型：

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

8.2 移动设备上的click事件

手机上也有click事件，从触摸到响应click事件，有会300的毫秒的延迟，原因在于:

“Apple 准备发布iphone的时候，为了解决手机上web页面太小的问题，增加了双击屏幕放大的功能，当用户触摸屏幕的时候，浏览器不知道用户是要double tap还是要click，所以浏览器在第一次tap事件后会等300ms来判断到底是double tap还是click ，如果在300ms以内点击的话，会以为是double tap，反之是click。”

8.3 touch事件基础

<script type="text/javascript">
    var box=document.getElementById("box");

box.ontouchstart=handleStart;
box.ontouchmove=handleMove;
box.ontouchend=handleEnd;

// box.addEventListener("touchstart",handleStart);
// box.addEventListener("touchmove",handleMove);
// box.addEventListener("touchend",handleEnd);

function handleStart(){
    console.log("ontouchstart")
}
function handleMove(){
    console.log("ontouchmove")
}
function handleEnd(){
    console.log("ontouchend")
}
</script>

九 设备判断

如果设备为移动端，则跳转到移动端站点

<script>
    // 若设备为移动设备，则跳转加载移动端样式
    if ((/(android|iphone|ipad|PlayBook|BB10)/i).test(window.navigator.userAgent)) {
        window.location.href = 'mobile/index.html';
    }
</script>

如果设备为PC，则跳转到PC端站点

<script>
    // 若设备为pc设备，则跳转加载pc样式
    if (!(/(android|iphone|ipad|PlayBook|BB10)/i).test(window.navigator.userAgent)) {
        window.location.href = '../index.html';
    }
</script>

十 移动端布局

10.1 媒体查询

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (min-width: 750px) {
    body {
        background-color: red;
    }
    html {
        font-size: 75px !important;
    }
}

@media screen and (min-width: 375px) and (max-width: 749px) {
    body {
        background-color: green;
    }
    html {
        font-size: 50px !important;
    }
}

@media screen and (min-width: 0px) and (max-width: 374px) {
    body {
        background-color: yellow;
    }
    html {
        font-size: 16px !important;
    }
}

10.2 less插件

less插件市场安装

创建index.less文件，然后右键-外部命令-less编译生成index.css文件，再引入网页中使用。

10.2 设置全局global.css样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}
body {
  min-width: 320px;
  max-width: 750px;
  /* flexible.js把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/
  width: 10rem;
  margin: 0 auto;
}

如果开发PC与移动一体的响应式页面可以参考：

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

body {
	min-width: 320px;
	max-width: 750px;
	width: 15rem;
	background-color: #F2F2F2;
}

/* 设置常见屏幕尺寸，修改html文字大小*/
/*划分份数为15*/
/*限定html大小 (pc打开直接50px)*/
html {
	font-size: 50px;
}

/* 320 */
@media screen and (min-width: 320px) {
	html {
		font-size: 21.33333333px;
	}
}

/* 360 */
@media screen and (min-width: 360px) {
	html {
		font-size: 24px;
	}
}

/*375*/
@media screen and (min-width: 375px) {
	html {
		font-size: 25px;
	}
}

/*384*/
@media screen and (min-width: 384px) {
	html {
		font-size: 25.6px;
	}
}

/*400*/
@media screen and (min-width: 400px) {
	html {
		font-size: 26.66666667px;
	}
}

/*414*/
@media screen and (min-width: 414px) {
	html {
		font-size: 27.6px;
	}
}

/*424*/
@media screen and (min-width: 424px) {
	html {
		font-size: 28.26666667px;
	}
}

/*480*/
@media screen and (min-width: 480px) {
	html {
		font-size: 32px;
	}
}

/*540*/
@media screen and (min-width: 540px) {
	html {
		font-size: 36px;
	}
}

/*720*/
@media screen and (min-width: 720px) {
	html {
		font-size: 48px;
	}
}

/*750*/
@media screen and (min-width: 750px) {
	html {
		font-size: 50px;
	}
}

10.3 了解蓝湖

蓝湖是北京尽微至广信息技术有限公司旗下的产品设计协作平台，国内第一款为互联网团队打造的产品设计协作平台，致力于帮助团队降低沟通成本、提高工作效率、优化工作流程。

官网：https://lanhuapp.com/?home