移动web中一些问题处理与事件说明

1.1.1 所有盒子以边框开始计算

/*设置宽度以边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子重边框开始计算宽度。

1.1.2 Input清除默认的样式

/*在移动端怎么清除默认的样式*/
/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性通过border：none

outline：none是无法完全清楚的，还是会有一些浏览器默认的属性，比如：

内阴影，立体感、、、向这些浏览器默认加上的样式我们怎么去除呢？

我们有一个属性 -webkit-appearance 这个属性指的是设置成 none

1.1.3 最小宽度和最大宽度的限制

max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px*/

如果设计稿是750px

min-width: 300px; /*在移动设备当中现在最小的尺寸320px*/

适用：图片比较多的首页，门户，电商等。

作用保证页面在尺寸比较大的设备当中保证页面的效果也就是清新度

保证页面在小尺寸的设备当中有较好的布局效果。

1.1.4 Img的下间隙问题

<div>

abcdefghijklmnopqrstuvwxyz

<img src="../images/nv-fy.jpg" alt=""/>

</div>

文字基线默认的 baseline 是以X的下边开始的

Img是行内块级元素它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。Font-size 0 对齐的方式

1.1.5 搜索按钮调用


<form action="#">
<input type="search" placeholder="提示"/>
</form>

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

1.1 知识内容

1.1.1 Touch事件

touchstart：当手指触碰屏幕时候触发。

绑定事件的方法：

dom.addEventListener('touchstart',function(e){});

事件返回的e对象包含那些移动端特有的属性：

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchmove：当手指在屏幕上滑动时连续触发。

绑定事件的方法：

dom.addEventListener('touchmove',function(e){});

事件返回的e对象包含那些移动端特有的属性：

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

touchend：当手指离开屏幕时触发。

绑定事件的方法：

dom.addEventListener('touchend',function(e){});

事件返回的e对象包含那些移动端特有的属性：

changedTouches 页面上最新更改的所有触摸

touchcancel：系统停止跟踪触摸时候会触发。

这个事件不会经常使用，了解即可。

注意：在touchend事件的时候event只会记录changedtouches

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

1.1.2 过渡和动画结束事件

transitionEnd 过渡结束后触发。

绑定事件的方法：

dom.addEventListener('webkitTransitionEnd',function(e){ });

dom.addEventListener('transitionEnd',function(e){ });

animationEnd 动画结束后触发。

绑定事件的方法：

dom.addEventListener('webkitAnimationEnd',function(e){ });

dom.addEventListener('animationEnd',function(e){ });

1.1.3 Gesture 事件（不常用）

gesturestart

当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。

gesturechange

当上面的事件触发后立即触发。

gestureend

第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。

在event当中会返回另外两个参数

scale 根据两个手指的滑动距离计算的缩放比例初始1

rotation根据两个手指的滑动距离计算的旋转角度初始 0

1.1.4 全屏单页面布局

试用百分比的方式：

/*满屏*/
html,body{
height: 100%;
}