1.为什么去学习移动web？
已经从趋势变成了一个主流了，互联网的流量入口已经大于PC端的流量入口
2.兼容性
在国内的移动web浏览器，绝大部分都是基于webkit内核的，所以一些css3效果，h5的新特性绝大部分都被支持，需要添加前缀。
（不同机型之间可能会略有不同，这个需要踩坑）
在移动端，做动画一律用过渡配合2D转换去实现
3.移动web对比PC布局的差异性
移动web的主要核心就是做自适应的布局，在手持设备上基本都是通栏的，并且布局的细节比PC端少，文字内容和模块也相对偏少
4.流式布局
其实 流式布局 就是百分比布局。是移动web开发使用的常用布局方式之一
流式布局下的几个页面特征：
（1）宽度自适应，高度写死，不能百分百去还原设计图
（2）一些小ICON 图标等都是写死的 不是所有的东西都是自适应的，一般都是模块会呈现自适应
（3）一些产品插入图 也就是img等都默认设置宽度百分百，让其自动保持等比例缩放，一般不予写死
（4）字体大小等都是写死的（后期可以使用媒体查询来改变字体大小）
后期会学到rem结合流式布局的写法：使用rem去计算高度，百分比去计算宽度，实现宽高完全自适应。
移动端的几个经典的页面模块布局：
`
（1）左侧固定 右侧自适应
左侧盒子固定，右侧自适应
（1）左侧盒子直接写死宽高，并且浮动
（2）右侧盒子直接不写宽，直接用margin-left去挤出距离，这个盒子默认会自动内减
HTML结构
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
样式
<style>
/* 需求：左侧固定 右侧自适应
（1）左侧盒子直接写死宽高 并且浮动
（2）右侧盒子直接不写width属性，用margin-left去挤出左边的距离出来
一个没有width属性的标准流盒子，添加padding和margin是不会撑大盒子的实际宽度
*/
.box {
width: 100%;
height: 300px;
}
.left {
width: 100px;
height: 300px;
background-color: red;
float: left;
}
.right {
height: 400px;
margin-left:110px;
background-color: green;
}
</style>
（2）右侧自适应，左侧固定
右侧盒子固定，左侧自适应
（1）右侧盒子直接写死宽高，并且浮动
（2）左侧盒子直接不写宽，直接用margin-right去挤出距离，这个盒子默认会自动内减
（3）右侧盒子在结构上在左侧盒子的前面，先浮动，后标准
样式
<style>
/* 需求：右侧固定 左侧自适应
（1）右侧盒子直接写死宽高 并且右浮动
（2）左侧盒子直接不写width属性，用margin-right去挤出右边的距离出来
（3）先浮后标
一个没有width属性的标准流盒子，添加padding和margin是不会撑大盒子的实际宽度
*/
.box {
width: 100%;
height: 300px;
}
.right {
width: 100px;
height: 300px;
background-color: red;
float: right;
}
.left {
height: 400px;
margin-right:110px;
background-color: green;
}
</style>
（3）圣杯布局
两侧固定 中间自适应
（1）左右的盒子都写固定的宽高，然后分别左浮动 右浮动
（2）中间的盒子直接用margin去挤出距离，不写宽自动内减
（3）右边浮动在结构（html里面）一定要放到标准流盒子的前面
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<style>
.box {
width: 100%;
height: 300px;
}
.left,.right {
width: 100px;
height: 300px;
background-color: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
height: 300px;
background-color: green;
margin:0 110px;
}
</style>
（4）中间固定，两边自适应
中间固定 两侧自适应
（1）中间盒子直接写死宽高，并且定位居中
（2）左右侧盒子直接width百分50%，并且浮动，并配合padding和内减去实现自适应
<div class="box">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
<div class="center">
我是中间的内容
</div>
</div>
<style>
.box {
width: 100%;
height: 400px;
position: relative;
}
.center {
width: 100px;
height: 400px;
background-color: red;
position: absolute;
left: 50%;
top: 0;
transform:translateX(-50%);
}
.left,.right {
width: 50%;
height: 400px;
float: left;
background-color: green;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.left {
padding-right: 60px;
}
.right {
padding-left: 60px;
}
.content {
height: 400px;
background-color: yellow;
}
</style>
（5）等分布局，就是百分比平分
Viewport（视口）
视口标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 100%;
height: 300px;
background-color: pink;
}
/* 将PC的页面直接放到手机端：
（1）没有出现横向滚动条
（2）整个的界面缩小了
（3）html的宽度永远是980，并没有随着屏幕的改变而改变 */
</style>
</head>
<body>
<div class="box">我是内容！！！</div>
</body>
</html>
注意的小细节: 通过模拟器加载的页面尽量刷新一下
1.我们猜想下pc页面在移动设备上显示情况。
放不下出现横向滚动条？还是自动缩放？
2.我们测试下pc页面在移动设备上显示。
默认是缩放显示的
3.认识viewport
以前我们的页面是直接丢到浏览器里面就直接运行了，但是现在在移动端，默认会给我们的页面添加了一个中间层，就是页面和浏览器中间会介入一个第三者，就是视口，也就是说视口会把页面包裹起来然后在放到浏览器里面进行渲染，而视口默认的大小一般是980，会比手机的物理设备的尺寸要大，同时视口会自动缩小到手机的屏幕大小，这就是为什么一个PC端的页面扔到移动端的话 理解的简单一点就是在页面外面包裹了一个默认大小为980（绝大多数）的盒子，这个盒子具备scale功能，并且同时在默认情况下会整体缩放（里面承载的网页也缩小了）到当前用户手机的屏幕大小
这是视口标签最开始出来的意义，持续了一段时间，但是发现这种体验不太好，因为一旦缩小就会页面就会很小看不清，一旦放大就会又看不完全。所以就有人开始做另一种手机网页模式就是不让视口标签去缩放，也不让用户去缩放，并且让视口的宽度就等于当前设备的宽度，就基于当前的屏幕分辨率去设计专门的设计图，针对差异不大的手机屏幕是采用自适应技术
视口标签的参数：
width：宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale：初始缩放比，大于0的数字（缩放是基于屏幕来的）
maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）；
用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面
配置标准化的视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 视口默认是980的大小，会自动收缩页面，收缩到当前设备的大小，然后用户可以通过手指去放大某一个细节 -->
<!-- 但是这个体验不太好，因为需要去放大，一旦放大就看不完全了，所以，我们需要配置一个标准的视口，这个时候的宽度就应该和屏幕的宽度保持一样大，缩放的比例保持1:1 并且不允许用户在用手指去缩放 -->
<!-- 生成语法： meta:vp tab键直接生成 -->
<!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,
user-scalable=no" >
<!--
width : 视口的宽度 默认是980 我们可以进行设置 device-width 表示的就是当前设备的宽度
initial-scale=1.0 视口的缩放比
user-scalable=no no或者yes 0或者1 允许或者禁止用户去缩放页面
maximum-scale=1.0, minimum-scale=1.0 最大和最小的缩放比，这两句话可加可不加
-->
<style>
.box {
width: 100%;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">111</div>
</body>
</html>
首页切图
注意事项：
一般设计图都是640 或者750 甚至更大，我们不能直接用这样的设计图去量尺寸，因为高度不准（除非量了之后手动去计算，但是会很麻烦），所以需要将设计图缩放到320的大小下面去进行量尺寸（但是真正的图片元素还是在之前的原始设计图下去切，因为这样不会失真）
320仅仅是用来量高度的
关于精灵图的缩放：
（1）得到缩放的比例 （原始设计图/320）根据比例将精灵图缩放 （代码里面通过background-size去缩放）
（2）在获取缩放后的精灵图对应的position
因为精灵图都是根据原始设计图的大小切出来的，所以，在流式布局里面使用精灵图的都需要用background-size缩放，至于缩放的比例(用原始设计图的分辨率/320)，缩放之后取得对应图片的background-position （千万别真把精灵图给缩放给保存了，我们缩放精灵图仅仅是用来获取缩放后的精灵图的position）
没有宽度的盒子写padding不会撑大盒子
怎么设置：
1.png
2.png
如果1：1的显示在移动设备当中 图标会失真
在行业中通用的设计稿 640px或者750
目的 熟练的时候百分比布局
首页的布局：是以百分比布局为主的 定最小宽度和最大宽度的布局。
适用：图片比较多的首页，门户，电商 等。
移动端事件
Touch事件
- touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指
-
touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 -
touchend：当手指离开屏幕时触发
-
touchcancel：系统停止跟踪触摸时候会触发。
例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick 300ms延时
Event
originalEvent （原生事件） 是jquery 封装的事件。
targetTouches 目标元素的所有当前触摸
changedTouches 页面上最新更改的所有触摸，在touchend里面触发，只有touchend的才可以获取event手指坐标
touches 页面上的所有触摸
注意：在touchend事件的时候event只会记录changedtouches
`
网友评论