1、移动端基础
①浏览器现状
说明：国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
②手机屏幕现状
● 移动端设备屏幕尺寸非常多，碎片化严重。
● Android设备有多种分辨率∶480×800,480×854,540×960,720×1280,1080×1920等，还有传说中的2K，4k屏。
● 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640×960,640×1136 等
● 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。
③常见移动端屏幕尺寸
数据可以参考：https://material.io/devices/
注∶作为前端开发，不建议大家去纠结dp , dpi , pt, ppi等单位。
④移动端调试方法
● Chrome DevTools (谷歌浏览器）的模拟手机调试
● 搭建本地web服务器，手机和服务器在同一个局域网内，通过手机访问服务器
● 使用外网服务器，直接IP或域名访问
总结：
● 移动端浏览器主要是对webkit内核进行兼容
● 现在开发的移动端主要针对手机端开发
● 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
● 学会用谷歌浏览器模拟手机界面以及调试
2、视口
说明：视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
①布局视口 (layout viewport)
● 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
● iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
②视觉视口 (visual viewport)
● 它是指用户正在看到的网站的区域。注意∶是网站的区域。
● 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
③理想视口 (ideal viewport)
● 为了使网站在移动端有最理想的浏览和阅读宽度而设定
● 理想视口，对设备来讲，是最理想的视口尺寸
● 需要手动添加meta视口标签通知浏览器操作
● meta视口标签的主要目的∶
布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
④meta视口标签
● 语法格式：
<meta name="viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
● 属性说明：
width → 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale → 初始缩放比，大于0的数字
maximum-scale → 最大缩放比，大于0的数字
minimum-scale → 最小缩放比，大于0的数字
user-scalable → 用户是否可以缩放，yes(1)或no(0)
⑤标准的viewport设置
● 视口宽度和设备保持一致
● 视口的默认缩放比例1.0
● 不允许用户自行缩放
● 最大允许的缩放比例1.0
● 最小允许的缩放比例1.0
总结：
● 视口就是浏览器显示页面内容的屏幕区域
● 视口分为布局视口、视觉视口和理想视口
● 移动端布局想要的理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
● 想要理想视口，需要给移动端页面添加meta视口标签
3、二倍图
①物理像素与物理像素比
● 物理像素也称分辨率
● 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
● 开发时候的1px不一定等于1个物理像素
● 在PC端页面，1px等于1个物理像素，但是移动端就不一定
● 1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
②多倍图
● 对于一张50px*50px的图片,在手机Retina屏中打开，按照物理像素比会放大倍数，这样会造成图片模糊
● 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
● 因为iPhone6\7\8的影响，开发中通常使用二倍图，但也存在3倍图4倍图的情况，这个看公司需求
● 背景图片注意缩放问题
③二倍图之插入图片
原理：图片在移动端被放大倍数之后的像素与原图像素一致
目的：解决图片在移动端被放大倍数之后造成的图片模糊
目标：比如想在移动端插入一张50px*50px的图片
步骤：
● 先在PC端准备一张比移动端原图大的图片，比如100px*100px的图片
● 然后手动的在CSS样式把图片的宽高改为准备图片的一半，也就是50px*50px
④二倍图之背景图片
原理：图片在移动端被放大倍数之后的像素与原图像素一致
目的：解决图片在移动端被放大倍数之后造成的图片模糊
目标：比如想在移动端放置一张50px*50px的背景图片
方法：
用到的css样式：background-size：背景图片宽度 背景图片高度;
说明：
● background-size 属性规定背景图像的尺寸
● 单位：px，百分比，cover，contain
● cover：把背景图片扩展至足够大，以使其完全覆盖背景区域。
● contain：把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域
步骤：
● 先在PC端准备一张比移动端原图大的图片，比如100px*100px的图片
● 其次把盒子的宽高设为50px
● 再者利用 background 放置背景图片
● 最后添加 background-size: 100% 100%;
注意：
background-size 样式必须放在url的后面，因为有了背景图片才能做缩放
⑤多倍图切图之cutterman工具
可以在PS中利用 cutterman工具快速的切出一倍图，二倍图，三倍图
@3X 是3倍图
@2X 是2倍图
@1X 是1倍图 (原图)
⑥二倍精灵图做法
● 在firework里面把精灵图等比例缩放为原来的一半
● 之后根据大小测量坐标
● 注意代码里面background-size也要写:精灵图原来宽度的一半 auto;
4、移动端开发选择
移动端主流方案
①单独移动端页面 (主流)
说明：
● 这个是单独写的页面，和PC端是分开
● 通常情况下，网址域名前面加m(mobile)可以打开移动端，比如m.taobao.com
● 通过判断设备，如果是移动设备打开，则跳到移动端页面。
②响应式兼容PC、移动端 (其次)
说明：
● 这个是只写一个页面，PC端、移动端共用
● 通过判断屏幕宽度来改变样式，以适应不同终端。
● 三星就是这样制作的，三星电子官网: www.samsung.com/cn/
优点：制作的页面效果很精美
缺点：制作麻烦，需要花很大精力去处理兼容性问题
总结：
● 现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案
● 现在市场主流的选择还是单独制作移动端页面
5、移动端技术解决方案
一、移动端浏览器
● 移动端浏览器基本以webkit内核为主，因此只考虑webkit兼容性问题。
● 可以放心使用H5标签和CSS3样式。
● 同时浏览器的私有前缀只需要考虑添加-webkit-即可
二、CSS初始化页面
移动端开发不建议自己写CSS初始化页面样式，推荐使用 normalize.css
下载地址：http://necolas.github.io/normalize.css/
normalize.css 的优点：
● 保护了有价值的默认值
● 修复了浏览器的bug
● 是模块化的
● 拥有详细的文档
三、特殊样式
①CSS3盒子模型
box-sizing: border-box;
-webkit-box-sizing: border-box;
②点击高亮需要清除
-webkit-tap-highlight-color: transparent;
③在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance : none;
④禁止长按页面时弹出菜单
img,a { -webkit-touch-callout: none; }
以上代码添加到CSS初始化页面样式
6、特殊的图片格式
一、webp图片格式
①谷歌开发的一种旨在加快图片加载速度的图片格式。
②图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间
二、dpg图片压缩技术
①京东自主研发推出DPG图片压缩技术，经测试，该技术可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。
②能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
7、移动端常见布局
移动端技术选型
说明：移动端布局和以前学习的PC端有所区别
①单独制作移动端页面 (主流)
● 流式布局 (百分比布局)
● flex弹性布局 (强烈推荐)
● less+rem+媒体查询布局
● 混合布局
②响应式页面兼容移动端 (其次)
● 媒体查询
● bootstrap
一、流式布局 (百分比布局)
● 流式布局，就是百分比布局，也称非固定像素布局。
● 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
● 盒子的宽度必须用百分比，高度可以用px
● 流式布局方式是移动web开发使用的比较常见的布局方式。
问题：
盒子在伸缩的时候可能会使得盒子里面的内容被挤下来，所以要规定伸缩的最大值和最小值
解决方法：
可以给盒子添加以下样式
max-width 最大宽度
min-width 最小宽度
max-height 最大高度
min-height 最小高度
二、flex弹性布局 (强烈推荐)
①传统布局与flex布局
传统布局：
● 兼容性好
● 布局繁琐
● 局限性，不能在移动端很好的布局
flex弹性布局：
● 操作方便，布局极为简单，移动端应用很广泛
● PC端浏览器支持情况较差
● IE11或更低版本，不支持或仅部分支持
建议：
● 如果是PC端页面布局，我们还是传统布局。
● 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
②flex布局原理
说明：flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
注意：采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。
● 当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效。
● 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
● 子容器可以横向排列也可以纵向排列
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
③flex布局常见属性
查看连接：Flex 布局语法教程 | 菜鸟教程
注意：
● 如果主轴是 x 轴，则侧轴是 y 轴；如果主轴是 y 轴，则侧轴是 x 轴
● align-items 属性控制的是侧轴，且子盒子是单行
● align-content 属性控制的是侧轴，且只能用于项目出现换行的情况(多行)，在单行下是没有效果的。
● 单行找align-items，多行找align-content
三、less+rem+媒体查询布局
(1)、rem 基础
● rem (root em)是一个相对单位，类似于em
● em是基于父元素的字体大小，不同的是，rem是基于html元素的字体大小。
● 比如，根元素 (html)设置font-size: 12px, 非根元素设置width: 2rem, 效果等于width: 24px
● 通过rem 可以整体的控制页面中元素的大小去自适应网页宽度高度的缩放
(2)、媒体查询
① 什么是媒体查询
说明：媒体查询 (Media Query)是CSS3新语法。
● 使用 @media查询，可以针对不同的媒体类型定义不同的样式
● @media可以针对不同的屏幕尺寸设置不同的样式
● 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
● 目前很多苹果手机，Android手机，平板等设备都会用到媒体查询
② 语法规范
@media mediatype 关键字 (media feature) {
//里面写CSS样式
}
● 用 @media 开头，注意@符号
● mediatype (媒体类型)
说明：将不同的终端设备划分成不同的类型，称为媒体类型
它的值有：
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，平板电脑，智能手机等
● 关键字
说明：关键字是将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
它的值有：
and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于“非”的意思，可以省略
only：指定某个特定的媒体类型，可以省略
● media feature (媒体特性)
说明：可以设置媒体类型的展示风格
注意：媒体特性必须要有小括号包起来
它的值有：
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
注意：
● mediatype，关键字，(media feature) 的值还有很多，以上列出的值是常用到的，其它属性值可以访问：CSS3 @media查询 | 菜鸟教程 查看
● 为了防止样式层叠，媒体查询一般按照 从小到大 或 从大到小 的顺序写代码，但建议选择 从小到大 写代码
(3) 引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)
原理：就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法规范：
<link rel="stylesheet" href="css路径" media="mediatype 关键字 (media feature)">
(4) less基础
① CSS的弊端
说明：CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域）等概念
● CSS需要书写大量看似没有逻辑的代码，所以CSS的冗余度是比较高的
● 不利于维护，扩展，复用
● CSS没有很好的计算能力
● 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
别急，CSS 预处理语言可以很好的解决 CSS 的弊端
② less介绍
● Less (leaner Style Sheets的缩写) 是一门CSS扩展语言，也称为CSS预处理器
● 它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
● 它在CSS的语法基础之上，引入了变量，Mixin (混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
● less网址：百度搜索关键字 less官网
● 常见的CSS预处理器：Sass、Less、Stylus
总结：Less是一门CSS预处理语言，它扩展了CSS的动态特性。
③ less使用
首先新建一个后缀名为less的文件，在这个less文件里面写less语句。
less变量：
● 变量是指没有固定的值，是可以改变的
● 在CSS中，颜色和数值等经常被作为变量的值去写
语法规范：
@变量名：值;
变量名命名规范：
1 必须以@为前缀
2 不能包含特殊字符
3 不能以数字开头
4 大小写区分，变量名较长可以使用驼峰命名法
less编译：
● 本质上，less包含一套自定义的语法，程序员根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
● 所以，程序员需要把less文件，编译生成css文件，这样我们的html页面才能使用。
● less文件编译成css文件需要用到插件，只需在编译器 (本人使用的是HBuilder X) 里找到插件安装，搜索less，点击安装即可
● 插件安装完毕，需重新启动编译器
● 如果想要保存(ctrl + s)一下less文件，就能自动生成CSS文件的话，要去设置编译器的快捷键，具体操作百度
less嵌套：
● 子元素的样式直接写到父元素里面，例如：
.box {
width: 200px;
height: 200px;
background-color: pink;
p {
color: red;
}
}
● 如果遇见 伪类，伪元素选择器，应该这样写：
.box {
width: 200px;
height: 200px;
background-color: pink;
p { //前面加个&
&:hover {
color: red;
}
}
}
注意：
内层选择器的前面没有&符号，则它被解析为父元素的后代。
如果有&符号，它就被解析为元素自身的伪类。
less运算：
● 任何数字、颜色或者变量都可以参与运算。
● less提供了 加( + )、减( – )、乘( * )、除( / ) 算术运算符。
● 运算符的左右要用空格隔开
● 对于两个不同单位的值之间的运算，运算结果的单位取第一个值的单位
● 对于两个值之间只有一个单位的运算，运算结果的单位取该单位
● 运算法则跟数学一样，先乘除后加减，有括号先算括号等等
两个less文件之间的导入：
比如向 index.less 导入 common.less，在index.less中写 @import "common"
(5) rem适配方案
① rem实际开发适配方案
按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小(媒体查询)
CSS中，设计稿元素的宽、高、相对位置等取值，按照等比例换算为rem为单位的值
② rem 适配方案技术的使用 (市场主流)
● 技术方案1：less + 媒体查询 + rem，核心步骤：
1 先选一套屏幕尺寸作为标准，比如 750px
2 用屏幕尺寸 除以 划分的份数(公司决定) 得到 html 的 font-size
3 新建一个less文件，里面写不同屏幕下的媒体查询
4 页面元素的 rem 值 = 测量出来的px值 除以 html 的 font-size
● 技术方案2 (推荐)：flexible.js + rem，核心步骤：
1 先选一套屏幕尺寸作为标准，比如 750px
2 用屏幕尺寸 除以 划分的份数(公司决定) 得到 html 的 font-size
3 页面元素的 rem 值 = 测量出来的px值 除以 html 的 font-size
4 flexible.js下载：https://github.com/amfe/lib-flexible
说明：
● flexible.js 是淘宝手机团队推出的简洁高效移动端适配库
● 程序员不需要写不同屏幕下的媒体查询，因为js做了处理
● js内部划分的份数是10等份 (10可以修改，公司决定)
● 程序员只需要确定好当前设备的html文字大小就可以了
总结：
● 两种方案现在都存在
● 方案2更简单
8、蓝湖或摹客协作平台
说明：
1 UI设计师把 psd效果图 完成后，会将效果图按照前端设计的要求把图片切好
2 之后会把 psd效果图 和 切好的图片 一并上传到蓝湖或者摹客里面，同时会拉前端程序员进入项目
3 前端程序员可以直接在摹客或者蓝湖里测量效果图取值，不需要在PS里面测量
虽然有关切图的工作不归程序员负责，但是也要了解其原理和操作
步骤：
1. 百度搜索摹客或者蓝湖关键词进入官网，之后注册一个账号
2. 在摹客或者蓝湖里面下载 PS插件
3. 双击，安装插件
4. 打开PS，依次找到 窗口→扩展功能→摹客，即可启动摹客
5. 上传到摹客或者蓝湖（想切图，需要先标记切图），上传时选择上传全部画板
6. 上传完毕之后查看项目
7. 邀请成员进入（分享按钮，链接地址）
以上操作是UI设计师去做的，前端程序员只需了解
9、swiper 插件使用
说明：
● Swiper 插件可以减轻程序员制作网页轮播图的工作
● Swiper 常用于移动端网站的内容触摸滑动
下载地址：百度搜索关键词 swiper 进入官网
步骤：
1 进入 Swiper 官网之后，找到网页上方的 获取Swiper，点击里面的 下载Swiper
2 下载 Swiper的zip，解压
3 在 Swiper 官网上方找到 中文教程，点击里面的 Swiper 使用方法
4 在解压出来的文件夹里找到 Swiper 使用方法 提到的js文件和css文件，把这两个文件复制到自己项目的js文件夹和css文件夹
5 在代码里引入这两个文件
6 再次进入 Swiper 官网，在网页上方找到 在线演示，点击里面的 swiper 基础演示
7 在 Swiper 基础演示页面中找到符合自己项目的实例，找到实例后在该实例的右上方点击在新窗口打开
8 点击在新窗口打开之后会单独进入该实例的页面，然后在这个单独的页面鼠标右键点击查看网页源代码
9 复制网页源代码里面的html结构，css样式 ，js 语法
注意：为了模块化开发，复制的html结构里的代码要用盒子包起来
10 点击Swiper官网页面上方的API文档，根据需求定制修改模块
10、响应式开发
原理：
通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备
设备的划分：
● 超小屏幕 (手机)：指小于768px的设备
● 小屏设备 (平板)：指在 768px(包含768px) — 992px 之间的设备
● 中等屏幕 (桌面显示器)：指在 992px(包含992px) — 1200px 之间的设备
● 宽屏设备 (大桌面显示器)：指大于等于1200px的设备
①响应式布局容器
● 响应式需要一个父级做为布局容器，来配合子级元素实现变化效果
● 在不同屏幕下，通过媒体查询改变布局容器的大小，从而改变里面子元素的排列方式和大小，实现不同屏幕下，看到不同的页面布局和样式变化。
响应式通常尺寸划分为：
超小屏幕 (手机，小于768px) 的设备布局容器宽度设置为100%
小屏幕 (平板，大于等于768px) 的设备布局容器宽度设置为750px
中等屏幕 (桌面显示器，大于等于992px) 的设备布局容器宽度设置为970px
大屏幕 (大桌面显示器，大于等于1200px) 的设备布局容器宽度设置为1170px
注意：
布局容器的宽度是px，是固定的
布局容器的宽度比屏幕尺寸小，是因为这样设置可以使得布局容器在居中时左右两边出现空白缝隙，显得美观
②Bootstrap 前端开发框架简介
说明：Bootstrap来自 Twitter(推特)，是基于HTML、CSS和JS的，它简洁灵活，使得Web开发更加快捷。
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
● 中文官网：http://www.bootcss.com/
● 官网：http://getbootstrap.com/
优点：
● 标准化的html+css编码规范
● 提供了一套简洁、直观、强悍的组件
● 有自己的生态圈，不断的更新迭代
● 让开发更简单，提高了开发的效率
③Bootstrap 使用
1 创建文件夹结构
● 在原来的结构上加个bootstrap文件夹，把解压出来的文件复制到bootstrap文件夹里
2 创建html骨架结构
● 可以在bootstrap中文官网里点击Bootstrap3中文文档，进入Bootstrap3中文文档后点击入门，找到基本模板
3 引入相关样式文件
● 引入bootstrap的css，js，fonts
4 书写内容
● 直接拿Bootstrap预先定义好的样式来使用，注意它是通过调用类名实现的效果
● 修改Bootstrap原来的样式，注意权重问题，一般引入框架放在上面，自己写的样式放在下面
● Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
④Bootstrap 布局容器
说明：Bootstrap 需要为页面内容和栅格系统包裹一个容器，Bootstarp预先定义好了这个类
1 container 类 (响应式布局的容器宽度)
大屏 (>=1200px)宽度定为1170px
中屏 (>=992px)宽度定为970px
小屏 (>=768px)宽度定为750px
超小屏宽度定为100%
注意：容器宽度的媒体查询无需程序员自己写，调用container 类即可
2 container-fluid 类 (流式布局容器)
占据全部视口( viewport)的容器
适合于单独做移动端开发
特别提醒：Bootstrap 布局容器的类必须是 container 或 container-fluid，否则Bootstrap无效
⑤Bootstrap 栅格系统
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，它是将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
Bootstrap里面的容器宽度是固定的。在不同屏幕下，容器宽度不同，划分的列数宽度也不同
⑥Bootstrap 栅格系统选项参数
具体使用方法可以查看官网，这里只做补充
说明：
栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
参数：
大屏幕 (大桌面显示器，大于等于1200px) 的类前缀是 .col-lg-n
中等屏幕 (桌面显示器，大于等于992px) 的类前缀是 .col-md-n
小屏幕 (平板，大于等于768px) 的类前缀是 .col-sm-n
超小屏幕 (手机，小于768px) 的类前缀是 .col-xs-n
● 类前缀后面的 n 意思是想要给当前的列占几份
● 行(row类)必须放到container布局容器里面
● 实现列的平均划分需要给列添加 类前缀
● xs是extra small的缩写，sm是small的缩写，md是medium的缩写，lg是large的缩写
● 每一列默认有左右15px的padding值
● 可以同时为每个列指定多个设备的类名，以便划分不同份数，例如class="col-md-4 col-sm-6"
● 如果列数相加等于12则这些列能占满整个container的宽度
● 如果列数相加小于12则这些列不能占满整个container的宽度，会有空白
● 如果列数相加大于12则放不下的列会另起一行显示
⑦Bootstrap 栅格系统嵌套列
具体使用方法可以查看官网，这里只做补充
列嵌套最好加row类盒子把列包起来，这样可以取消父元素的padding值且高度自动和父级一样高
⑧Bootstrap 栅格系统列偏移
具体使用方法可以查看官网，这里只做补充
偏移的数值要计算
11、vw 和 vh
①vw 与 vh 是一个相对单位
● vw是：viewport width 的缩写，即视口宽度单位
● vh是：viewport height 的缩写，即视口高度单位
②vw 与 vh 的尺寸计算结果
说明：vw 与 vh 分别把视口宽度、视口高度平均分成100份
● 1vw = 视口宽度的1%
● 1vh = 视口高度的1%
例如：
当前屏幕视口是375像素，则1vw就是3.75像素
注意：
本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用 vw 就基本足够了。vh很少使用。
③vw、wh 和 百分比的区别
● 百分比单位是相对于父元素来说的
● vw、vh单位是相对于当前视口来说的
12、触屏事件
1、触屏事件概述
● 移动端浏览器兼容性较好，程序员不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果。
● 但是移动端也有自己独特的地方。比如 触屏事件touch (也称触摸事件)，Android 和 IOS 都有。
● touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。
● 触屏事件可响应用户手指（或触摸笔) 对屏幕或者触控板操作。
常见的触屏事件：
touchstart 手指触摸到一个 DOM 元素时触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发
2、触屏事件对象 (TouchEvent)
● TouchEvent 是一类描述手指在触摸平面 (触摸屏、触摸板等) 的状态变化的事件。
● 这类事件用于描述一个或多个触摸点，使开发者可以检测触摸点的移动，触摸点的增加和减少，等等。
● touchstart、touchmove、touchend 这三个事件都有各自的事件对象。
触屏事件对象重点看三个常见对象列表：
touches 返回正在触摸屏幕的所有手指的列表
targetTouches 返回正在触摸当前DOM元素的手指的列表
changedTouches 返回手指状态发生了改变的列表，从无到有，从有到无的变化
因为在开发中都是给元素注册触屏事件，所以重点记住 targetTocuhes
3、移动端拖动元素
● touchstart、touchmove、touchend 可以实现拖动元素
● 拖动元素需要获取当前手指的坐标值，可以使用 targetTouches[0] 获取里面的pageX和pageY
● 移动端拖动的原理：手指移动时，计算出手指移动的距离。然后用盒子初始的位置 + 手指移动的距离
● 手指移动的距离：手指滑动时的位置减去手指初始位置
拖动元素三步曲：
触摸元素touchstart：获取手指初始坐标，同时获取盒子初始的位置
移动手指touchmove：计算出手指移动的距离，并且移动盒子 (移动端拖动的原理)
离开手指touchend：
注意：手指移动也会触发滚动屏幕，所以要在移动手指里阻止默认的屏幕滚动，即e.preventDefault()
4、检测过渡完成事件 transitionend
说明：该事件可以使得过渡完成时进行下一步操作
13、移动端双击屏幕的延迟解决方案
说明：
移动端双击屏幕会有300ms的延时，原因是移动端双击屏幕时会缩放(double tap to zoom)页面。
如果在300ms里双击屏幕，则会缩放页面；如果在300ms里只点了一次屏幕，则充当点击事件处理
问题：
假如页面中有个返回顶部的按钮，当你点击了一次这个按钮，发现页面不是马上返回顶部，而是过了一会儿
才返回。这是因为当你点击了一次按钮(其实也是屏幕)之后，页面会在300ms内进行等待，看看你是不是会在
300ms内再点击一次，如果你只点击了一次，页面会认为这是触屏事件。所以，为了解决页面会在300ms内
进行等待这个问题，有如下解决方案：
① 禁用缩放：
浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no">
注意：如果网页需要用户可以缩放页面就需要用到方法②
② 利用 fastclick.js 插件：
下载地址：https://github.com/ftlabs/fastclick
进入网页后点击 lib 文件夹，里面就有 fastclick.js
使用方法：
● 点击 fastclick.js 会进入到另外的网页，里面是该 js 的代码，复制代码到你新建的js文件里，
然后在页面引用js。
● 在下载地址的主页下拉到 Usage 标签，在这个标签里有 fastclick.js 插件的使用规范，看不懂英文可以
利用网页自带的翻译进行翻译
14、其它移动端常见的插件
superslide：http://www.superslide2.com/
iscroll：https://github.com/cubiq/iscroll
zy.media.js：https://github.com/ireaderlab/zyMedia (视频插件)
如果连接失效了，百度搜索关键词
15、移动端常用开发框架
概述
● 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架
本身，使用者要按照框架所规定的某种规范进行开发。
● 插件，一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
● 前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端
● 前端常用的移动端插件有swiper、superslide、iscroll等。
总结：
框架：大而齐全，提供一整套解决方案
插件：小而专一，提供某个功能的解决方案
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
.png)
