【前端】移动端布局以及交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端】移动端布局以及交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

视口与像素

视口默认指当前计算机显示图形区域，如屏幕显示区域，通常于浏览器窗口相同。
视口区域的物理像素宽高未必与CSS像素相符，要根据设备像素比换算：设备像素比DPR =物理像素（设备像素）/CSS像素，DPR越大代表屏幕越清晰。
移动端浏览器中的三种视口：

布局视口：默认指网页的布局宽度，默认的布局视口大小不适合手机端显示，通常会导致滚动条的出现
视觉视口：指用户正在看到的网站区域，这个区域的宽度等同于移动设备浏览器窗口的宽度。操作网页放大缩小时，主要操作的视觉视口，布局视口仍保持原有大小。
理想视口：指对设备来讲最理想的视口尺寸，布局视口完全等于视觉视口，不同的设备有自己不同的理想视口，所以用device-width来表示。

viewport

viewport是响应式页面必不可少的内容，但它不是Web标准的一部分。
viewport就是终端的屏幕上能用来显示网页的区域，viewport不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
允许网页自动调整：使用viewport属性，让窗口可以自动伸缩。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
/*width 视口宽度，一般取值为device-width，也可以为尺寸值*/
/*initial-scale 初始状态下缩放倍率*/
/*user-scalable 是否允许用户自己缩放，默认为yes*/

rem布局

rem是相对单位，相对于HTML标签的字号大小，1rem=1html标签字大小，设置方法为：

给html标签添加字号
设置元素尺寸为rem单位

rem是一种弹性布局，它强调等比缩放，100%还原。跟随页面大小的变化，html的字号也随之变化，因此rem单位页跟随变化，从而实现移动端页面的自适应。它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示。
rem和em不同，rem是相对根节点的字号，em是相对父元素的字号。

使用方式

使用媒体查询给不同的终端设置不同的字号

@media screen and {min-width:375px;}{html{font-size:58.59375px;}}
div{width:1rem;height:2rem;}

使用js实现根节点的设置，同时最好添加onresize事件实现动态变化。

window.addEventListener('resize',()=>{
	var designWidth = 640;//设定屏幕的标准尺寸
	var rem2px = 100;
	document.documentElement.style.fontsize = ((window.innerWidth/designWidth)*rem2px)+'px';
})

viewport适配是用来更改视口的大小，当减少视口宽度之后，当前元素的可视大小也会减少，从而进行移动端的适配，我们需要获取到当前对应设备的信息进行动态设置。

/**targetW为设计图的宽度大小/
var targetW = 640;
/*获取视口缩放的比例*/
var scale = document.documentElement.clientWidth/targetW;
/*获取meta标签*/
var meta = document.querySelector("meta[name='viewport']");
/*添加缩放的比例*/
meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

根据设计图进行targetW的大小设置，不是固定值。

移动端像素边框问题

由于不同移动设备的设备像素比（DPR）不同，因此，设置的1px边框线在不同的屏幕上展示的效果不同。解决方案：使用伪类元素解决，根据媒体查询判断当前屏幕的设备像素比（DPR），如果大于2，则使用伪类实现。

.a{
	width:100px;
	height:100px;
	border:1px solid #999;
	position:relative;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
	.a:before{
		content:"";
		pointer-events:none;
		box-sizing:border-box;
		position:absolute;
		width:200%;
		height:200%;
		left:0;
		top:0;
		border-radius:8px;
		border:1px solid #999;
		-webkit-transform(scale(0.5));
		-webkit-transform-origin:0 0;
		transform(scale(0.5));
		transform-origin:0 0;
	}
}

媒体查询一定要设置，否则基础屏幕会有显示问题。

流式布局

流式布局就是页面元素的宽度按照屏幕进行适配调整。主要靠百分比进行排版，在不同的设备上呈现相同的版式。Bootstrap中的栅格系统就是流式布局。通过给元素容器设置百分比大小，根据屏幕宽度改变随之发生变化。
百分比布局需要参照物。如果屏幕尺寸的跨度太大，那么相对于原始设计显示差异会比较大。因为宽度用百分比控制，会随着屏幕大小变化，但是文字和高度依然使用px，这样显示就会不协调。

实现方案

流式布局通常被分为12列。

将页面的宽度设置为100%，每列所占的百分比：100%/12列=8.33%。

box-sizing设置为border-box，元素padding和border的值就不会再影响元素的宽高。

流式布局，一般会使用min-*，max-*进行搭配设置样式，例如：max-width，min-width，可以使布局保持一个基本的样式，在多列布局时，可以保证某几列的布局保持在一定范围内。

媒体查询

当浏览器窗口大小在发生变化时，页面会根据屏幕宽度的变化展示对应条件下的样式。
@media的作用就是可以针对不同的媒体类型或者不同的屏幕大小定义不同的样式，在实现响应式布局时，媒体查询也是很关键的一步。
很对的框架样式都用的到媒体查询。

语法

@media not|only mediatype and (mdeia feature){
	CSS;
}

mediatype是媒体类型

screen（表示电脑屏幕、平板电脑、手机等）
print（表示打印机和打印预览）
all（所有设备）

关键字 and not only

and：表示可以将多个媒体特性连接到一起，相当于且。
not：表示排除某个媒体类型，相当于非。
only：表示特定的媒体类型。

例：

/*>=600px的设备*/
@media screen and (min-width:600px){
	body{
		background-color:red;
	}
}

touch事件

touchstart事件：当手指触摸屏幕时候触发
touchmove事件：当手指在屏幕上滑动时连续地触发，在这个事件发生期间，调用preventDefault()事件可以阻止滚动
touchend事件：用户从元素上移开手指时发生
touchcancel事件：在触摸被中断发生，不同的设备会在不同的动作中中断触摸事件

每次发生touch事件，都会随之产生一个touch事件对象，类似于事件处理函数中的事件对象。
touchList表示触摸表面上的接触点列表，touchList.item()返回列表中指定索引处的touch对象。可以找到指定touch对象，进行相关的操作。

var btn = document.getElementById('btn');
btn.addEventListener('touchstart',function(ev){
	console.log(ev.touches);
	//输出接触点列表
})

滑动方向

通过touch事件，进行初始位置以及滑动位置的判断，规定对应的移动方向。
起点：当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY。
终点：当开始一个touch end事件的时候，获取此刻手指的横坐标startX和纵坐标startY。
方向检测：利用初识坐标点与终止坐标点进行对比判断，根据结果比较谁移动的最多，判断具体方向。
注意：触控模式下，要阻止网页默认事件。不然会同时出发滚屏效果。

*{
	touch-action:none;
}

根据手势滑动显示不同方位文字：

let startX,startY,moveEndX,moveEndY,x,y;
$("body").on("touchstart",function(e){
	e.preventDefault();
	startX = e.touches[0].pagex;
	startY = e.touches[0].pagey;
	$("body").on("touchmove",function(){
		$("body").on("touchend",function(e){
			e.preventDefault();
			moveEndX = e.originalEvent.changedTouches[0].pagex;
			moveEndY = e.originalEvent.changedTouches[0].pagey;
			x = moveEndX - startX;
			y = moveEndY = startY;
			if(Math.abs(x)>Math.abs(y)&&x>0){
				console.log("右");
			}else if(Math.abs(x)>Math.abs(y)&&x<0){
				console.log("左");
			}else if(Math.abs(y)>Math.abs(x)&&y>0){
				console.log("下")
			}else if(Math.abs(y)>Math.abs(x)&&y<0){
				conosle.log("上")
			}else{
				console.log("不动")
			}
		})
	})
})

设备方向

在使用移动设备过程中会出现设备方向的变化，通过orientationchange事件，监听设备方向变化。

window.addEventListener("orientationchange",function(){
	alert(window.orientation);
	//值为0表示直立，90表示设备水平旋转到左边，-90设备水平旋转到右边。180标志设备顺时针旋转到底部，-180表示设备逆时针旋转到底部
},false);

加速度事件

通过设备的重力感应来判断对应的移动方向，以及加速度信息。
事件名称：deviceorientation，提供设备的物理方向信息，表示为一系列本地坐标系的旋角。devicemotion提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标；还提供了设备在坐标系中的自转速率。通过事件对象的acceleration属性判断设备加速度。文章来源地址https://www.toymoban.com/news/detail-773821.html

window.addEventListener("deviceorientation",(e)=>{
	let {x,y,x} = e.acceleration;
	console.log(x,y,z);
	//通过x,y,x解构出对应方向的加速度
	//可根据x,y,z是否为true，判断对应方向是否移动
})