移动web开发

流式布局

其实流式布局就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

这样的布局方式就是移动web开发使用的常用布局方式

Viewport

我们猜想下pc页面在移动设备上显示情况。

放不下，缩放？

我们测试下pc页面在移动设备上显示。

默认的缩放的显示的

认识viewport

在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口）,这个区域可是设置高度宽度，可是按比例放大缩小，而且能设置是否允许用户自行缩放。

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页面

Retina屏

所谓“Retina”是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

物理像素像素点

屏幕尺寸 1px

首页切图

<!--整体布局盒子-->
<div class="jd_layout">

/*主体*/
.jd_layout {
 100%;
max- 640px;  /*设计稿一般都是640px 是不是会放大页面 清晰？*/
min- 300px;  /*由于一些老设备可能比320还小*/
margin: 0 auto;

<!--这样的固定结构？在移动端可以调用enter键 属于小键盘当中的  改成搜索按钮-->  调用键盘
<form action="#">
    <input type="search" placeholder="搜索"/>
</form>

base.css

*,::before,::afte

/*设置所有的盒子都是以边框开始计算使用的都流式布局*/

-webkit-box-sizing: border-box;/*要求兼容主流浏览器 webkit内核的必须*/

box-sizing: border-box;

/*清除移动端默认的点击高亮效果 */

-webkit-tap-highlight-color: transparent;

/*清除移动端默认的输入框的默认样式*/

-webkit-appearance: none;

如果1：1的显示在移动设备当中图标会失真

在行业中通用的设计稿 640px

首页的布局：是以百分比布局为主的定最小宽度和最大宽度的布局。

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

移动端事件

Touch

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

绑定事件的方法：

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

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

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

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

touches 页面上的所有触摸

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

绑定事件的方法：

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

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

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

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

touches 页面上的所有触摸

会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

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

绑定事件的方法：

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

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

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

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

例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick 300ms延时

Event

originalEvent （原生事件）是jquery 封装的事件。

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

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

touches 页面上的所有触摸

/*记录滑动的时候的x的坐标会随时改变*/

moveX = e.touches[0].clientX;

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

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

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

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

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

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

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

过渡和动画结束事件

transitionEnd 过渡结束后触发。

绑定事件的方法：

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

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

animationEnd 动画结束后触发。

绑定事件的方法：

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

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

Gesture 事件（不常用）

gesturestart

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

gesturechange

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

gestureend

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

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

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

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

全屏单页面布局

试用百分比的方式：

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

移动端事件原理

在移动端通常 tap swipe 等事件的封装原理

Tap：

由于在移动端click会有300ms左右的延时，为了响应速度更快移动端框架一般会封装一个加tap的事件，原理：利用touch事件当没有滑动过并且响应时间在一定的时间内（比click快）那么这样的一个过程就是一个tap事件。

Swipe：

在移动端有手势事件，也是一些移动端框架封装出来的那么这种事件也是touch事件开始的位置和结束的位置来判断手势的情况。是向下滑还是向右滑，是向下滑还是向上滑。

购物车页面切图

购物车页面是一个移动端最常使用的布局方式，完全的试用通栏流式布局的方式，宽度自适应。

这个页面需要注意的地方。

怎么自定义checkbox:属性选择器

移动端弹出框的特点:animte.css的使用，思路理解。

推荐网站

动画网站：https://daneden.github.io/animate.css/

这个网站可以提供一些常用的动画，可以在做移动开发的时候可以参考这个网站的效果完成动画。

Zepto：http://zeptojs.com/

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。

Swiper: http://www.swiper.com.cn/demo/index.html

常用于移动端网站的内容触摸滑动

是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

Iscroll: http://cubiq.org/iscroll-5

无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动，它可以支持这样的滑动效果。

项目三种布局分析

首页的适用场景

门户电商的首页而且内容比较丰富

分类页面的使用场景

是单页面全屏的布局当中会使用

异步的交互 ajax web app 的开发模式当中会使用到

Web app 网页程序网页应用

移动web页面优点：跨平台 android ios

Hybird app 现在流行起来的混合应用开发模式 webview

套用嵌入移动web页面的应用所有的移动页面都可以

Native app 原生应用

购物车页面

任何地方都可以用到这样的布局。

页面开发注意事项

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

/*设置宽度以边框开始计算*/

-webkit-box-sizing: border-box;

box-sizing: border-box;

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

2 Input清除默认的样式

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

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

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

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

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

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

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

如果设计稿是750px

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

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

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

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

4 Img的下间隙问题

<div>

abcdefghijklmnopqrstuvwxyz

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

</div>

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

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

5 搜索按钮调用

<form action="#">

<input type="search" placeholder="提示"/>

</form>

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

6 移动端的滑动效果

在移动端特有的事件touch中，

包含了 touchstart，touchmove，touchend三个事件，

首先：

我们可以通过touchstart事件中返回的event对象中的第一个触摸点信息中的client坐标，

然后：

我们再通过监听touchmove事件的时候获取到滑动的时候的触摸点，在互获取event对象中返回的client坐标，这样就可以计算滑动的时候改变的距离。

同时改变当前元素的translate就可以。

最后：

在touchend的时候利用记录下当前元素的定位。

注意的是：在移动端是利用transform来做定位。

滑动的时候改变距离的方向问题。

7 过渡结束事件

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

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

在这里要注意的是：为了兼容浏览器在绑定事件的时候需要同时绑定一个带webkit前缀的事件和不带的这样达到兼容主流浏览器。

还有：给目标元素绑定事件后，每一次过渡结束都会触发transitionEnd事件。

8 使用过渡和改变注意问题

在移动端为了兼容老版本的一些webkit浏览时在css中或者js中一定要做兼容处理。

Css中的处理方法是加上-webkit-前缀和一个不加的。

Js中处理方法是style设置的时候需要设置一个webkit前缀的属性和一个不加的。

9 两栏其中一栏宽度自适应

我们首先知道文本环绕的的概念：

那么当文本在另一个容器当中，容器是overflow：hidden的时候。那么这个时候这个盒子就变成了一个绝缘的盒子，不去影响任何外部的元素并且内容使用剩余的宽度。

这样也可是做一个自适应的两栏布局方式。浮动的元素写在前面

10 按钮问题

这里的按钮设置的是 40*44的大小但是内容只有20px为什么要这么设置呢？

在移动端如果按钮太小触发起来相对来说比较困难，用户体验非常不好。那么在设置按钮的时候需要设置的更大一点。

注意不能使用margin，应为a标签触发不了。

background-clip: content-box;

background-origin:content-box;