移动web开发

标签：

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

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

放不下，缩放？

默认的缩放的显示的

在移动端用来承载网页的这个区域，就是我们的视觉窗口，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 {
width: 100%;
max-width: 640px;  /*设计稿一般都是640px 是不是会放大页面 清晰？*/
min-width: 300px;  /*由于一些老设备可能比320还小*/
margin: 0 auto;

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

 

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

 

 

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

 

 

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

 

 

touches 页面上的所有触摸

 

 

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

 

 

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

 

 

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

 

 

touches 页面上的所有触摸

 

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

 

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

 

 

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

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

无论是在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清除默认的样式

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

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

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

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

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

如果设计稿是750px

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

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

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

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

4  Img的下间隙问题

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

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

<!--在移动端点击弹出输入法  enter键会显示搜索-->

<form action="#">

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

</form>

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

 

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

 

 

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

 

 

首先：

 

 

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

 

 

然后：

 

 

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

 

 

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

 

 

最后：

 

 

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

 

 

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

 

 

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

background-clip: content-box;

background-origin:content-box;

 

移动web开发

标签：

原文地址：http://www.cnblogs.com/zhanggaojun/p/5747751.html