移动web开发

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结构

样式

（2）右侧自适应，左侧固定

 右侧盒子固定，左侧自适应 
（1）右侧盒子直接写死宽高，并且浮动
（2）左侧盒子直接不写宽，直接用margin-right去挤出距离，这个盒子默认会自动内减
（3）右侧盒子在结构上在左侧盒子的前面，先浮动，后标准

样式

（3）圣杯布局

 两侧固定 中间自适应 
（1）左右的盒子都写固定的宽高，然后分别左浮动 右浮动
（2）中间的盒子直接用margin去挤出距离，不写宽自动内减
（3）右边浮动在结构（html里面）一定要放到标准流盒子的前面

（4）中间固定，两边自适应

 中间固定 两侧自适应 
（1）中间盒子直接写死宽高，并且定位居中
（2）左右侧盒子直接width百分50%，并且浮动，并配合padding和内减去实现自适应

        

            

        
        

            

        
        

            我是中间的内容
        
    

（5）等分布局，就是百分比平分

Viewport（视口）

视口标签

    
    
    


    
我是内容！！！

注意的小细节: 通过模拟器加载的页面尽量刷新一下
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页面

配置标准化的视口

    
    

    

    
    

    

    


    
    
    
    
    



    
111

首页切图

注意事项：
一般设计图都是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
`