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

  <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：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 `