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

Posted 2020-08-05

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 搜索按钮调用

<!--在移动端点击弹出输入法  enter键会显示搜索-->
<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%;
}