移动开发总结

移动端开发

流式布局

介绍

流式布局即百分比布局，通过把盒子的宽度设置为百分比屏幕来进行伸缩，不受固定像素的限制，内容向两侧填充

viewport

*即视觉窗口，这个区域设置的宽度和高度是按照比例放大和缩小，并且可以设置是否允许自行缩放
*width：宽度设置的是viewport宽度，可以设置device-width特殊值
*initial-scale：初始缩放比，大于0的数字
*maximum-scale：最大缩放比，大于0的数字
*minimum-scale：最小缩放比，大于0的数字
*user-scalable：用户是否可以缩放，yes或no（1或0）

如何设置为标准的移动开发页面

meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"

移动端事件

Touch

touchstart：当手指触碰屏幕发生

*绑定事件的方法：dom.addEventListener(‘touchstart’,function(e){});
*事件返回的e对象包含那些移动端特有的属性：
*targetTouches 目标元素的所有当前触摸
*changedTouches 页面上最新更改的所有触摸
*touches 页面上的所有触摸

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

*通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
*绑定事件的方法：dom.addEventListener(‘touchmove’,function(e){});
*事件返回的e对象包含那些移动端特有的属性：

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

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

touches 页面上的所有触摸

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

*绑定事件的方法：dom.addEventListener(‘touchend’,function(e){});
*事件返回的e对象包含那些移动端特有的属性：

touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序

*ontouchstart
*ontouchmove
*ontouchend
*onclick 300ms延时

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

*clientX:触摸目标在视口中的X坐标。
*clientY:触摸目标在视口中的Y坐标。
*pageX：触摸目标在页面中的x坐标。
*pageY：触摸目标在页面中的y坐标。
*screenX:触摸目标在屏幕中的x坐标。
*screenY:触摸目标在屏幕中的y坐标。

遇到的问题

点击高亮效果

-webkit-tap-highlight-color:transparent;/清除点击高亮效果*/
*移动端中会遇到点击高亮效果，项目实际中是不需要默认的效果的，通常会把这个点击颜色设置为透明。

所有盒子以边框开始计算

*-webkit-box-sizing: border-box;
box-sizing: border-box;/设置宽度以边框开始计算*/
*移动端通常使用百分比布局，如果这个情况下使用border或者padding或容器的宽度超出屏幕宽度就会产生滚动条，所有设置边框开始计算宽度。

Input清除默认的样式

-webkit-appearance: none;/在移动端清除浏览器默认样式*/
*浏览器表单一般会有默认样式，需要清除默认样式

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

max-width: 640px; /在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px; /在移动设备当中现在最小的尺寸320px*/
*保证大屏设备的清晰度和小屏设备的布局效果

Img的下间隙问题

img是行内块级元素，有默认的基线对齐，和文字底部有一定间隙。

搜索按钮调用

input type=”search” placeholder=”提示”
在移动端调用输入法的时候会弹出小键盘，enter键会显示搜索，所以需要调用搜索按钮

结构型伪类选择器

*E:first-of-type匹配同类型中的第一个元素E。
*E:last-of-type匹配同类型中的最后一个元素E。
E:nth-of-type(n) 匹配同类型中的第n个元素E。

响应式设计优缺点

优点

解决了设备之间的差异化展示

缺点

*兼容性代码多，工作量大，加载速度受影响
*对原有网站布局会产生影响，用户判断未必精确

响应式设计的原则

移动优先：

在设计的初期就要考虑的页面如何在多终端展示

渐进增强：

充分发挥硬件设备的最大功能

如何实现响应式布局

*CSS3-Media Query 最简单的方式
*借助原生Javascript 成本高，不推荐使用
*第三方开源框架 可以很好的支持浏览器的响应式布局的设计 类似bootstrap

CSS3-Media Query

常见的属性

*device-width,device-height –屏幕宽高
*width，height –渲染窗口宽高
*orientation –设备方向
*resolution –设备分辨率

基本的语法

*外联CSS语法
*内嵌样式的语法

div可拖拽

解决地址http://www.cnblogs.com/libin-1/p/6149057.html