移动web开发基础学习笔记

写在前面

这篇文章并不是我写的教程，而是看了慕课网碧仔老师的课程《Hello，移动WEB》而做的笔记。

我觉得这个课程十分适合有一定web前端经验，但没有接触过移动web开发的朋友学习，他讲的知识比较基础，老师功底很好，讲课风格也很不错，课程很容易听懂，我觉得听了之后收获很大。希望感兴趣的同学可以去看看碧仔老师的这个课程，课程不长，一晚上就可以看完。

然后我写的这篇文章呢，就是在看此教程时做的笔记，只是记下了大概的知识点，方便自己以后查阅。

大纲：
像素基础->viewport->定制化移动web->高效布局->常见移动web问题->交互优化

01 基础知识

1-1 pixel像素基础

• px：css pixels 逻辑像素，浏览器使用的抽象单位
• dp，pt：device independent pixels 设备无关像素
• dpr：devicePixelRatio 设备像素缩放比

平面上 1px = (dpr)^2*dp

维度上 1px = dpr*dp

1-2 Viewport

把整个页面缩放放在屏幕中，页面缩放在一个980px（ios）的viewport

1. visual viewport（上层，视口，缩放）

2. layout viewport（底层，渲染）

为什么不使用默认的980px的布局viewport？

• 宽度不可控制，不同系统不同设备的默认值都可能不同
• 页面缩小显示，交互不友好
• 链接不可点
• 有缩放，缩放后又有滚动
• font-size为40px才等于pc上的12px同等大小，不规范

1-3 viewport Meta标签

用meta标签改造viewport

<meta name="viewport" content="name=value,name=value">

• width：设置布局viewport的特定值（“device-width”）
• initial-scale：设置页面的初始缩放
• minimum-scale：最少缩放
• maximum-scale：最大缩放
• user-scalable：用户是否能缩放

<meta name="viewport" content="width=device-width">

移动web最佳viewport设置：三者为一

【布局viewport】=【设备宽度】=【度量viewport】

<mete name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

02 移动布局

2-1 Flexbox弹性盒子布局

display:-webkit-flex //标示使用弹性布局
flex:<num> //占容器比例

不定宽高的水平垂直居中

.myoff-wrapper{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
}

【flexbox版】不定宽高的水平垂直居中

.parent{
    justify-content:center; //子元素水平居中
    align-items:center; //子元素垂直居中
    display:-webkit-flex;
}

2-2 Flexbox弹性盒子布局

兼容性问题：新版flex不支持android 4.4以下版本

新flex布局

display:-webkit-flex;
-webkit-flex:1;
justify-content:center;
align-items:center;

旧flexbox布局

display:-webkit-flex-box;
-webkit-flex-box:1;
box-pack:center;
box-align:center;

2-3 响应式设计

当页面大小改变时，适应屏幕宽度进行某些样式调整

媒体查询

@media screen and (max-width:1024px){
    #pagewrap{
        width:95.5%;
    }
    #content{
        width:62%;
    }
    #content .article .hr{
        width:66%;
        margin-left:34%;
    }
}

设计点一：百分比布局（建议）

满足主流宽高即可，百分比布局更利于非主流宽高的表现。

设计点二：弹性图片

图片外div，图片100%，div宽高随屏幕大小变化。

设计点三：重新布局，显示与隐藏

1. 同比例缩减元素尺寸
2. 调整页面元素布局
3. 隐藏冗余的元素

建议绝对定位

响应式设计思考

性能不是最优，因为会下载冗余样式，但是它可以减少重复开发。

2-4 移动web特殊样式处理

高清图片

一像素边框

同样是retina屏幕下的问题，根本原因：1px使用2dp渲染

解决方法：-webkit-transform: sacleY(.5)

相对单位

px略显固定，使用相对单位更能体验页面兼容性

• em：根据父节点的font-size为相对单位
• rem：根据html的font-size为相对单位

em在多层嵌套下，变得非常难以控制；rem更加能作为全局统一设置的度量。

使用方法： 使用手机屏幕设置html的font-size，比如rem=screen.width/20

但是字体应该使用px，而不是用rem。

多行文本溢出

单行文本溢出

.inaline{
    overflow:hidden;
    white-space:nowwrap;
    text-overflow:ellipsis;
}

多行文本溢出

.intwoline{
    display:-webkit-box !important;
    overflow:hidden;

    text-overflow:ellipsis;
    word-break:break-all;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;   //行数
}

03 终端交互优化

3-1 Tap基础事件

300毫秒的故事

click事件300毫秒的延迟，用于判断双击。

Tap基础事件

自定义tap事件原理：在touchstart和touchend记录事件和位置，若位置相差合理则称触发了“tap”。

“点透”BUG原因就是300ms延迟。

3-2 触摸touch

触摸才是移动设备的交互核心事件

• touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会触发）
• touchmove：手指在屏幕滑动，连续触发
• touchend：手指离开屏幕时触发
• touchcancel：系统取消touch时触发（不常用）

触摸事件包含专有的触摸属性

• touches：跟踪触摸操作的touch对象数组
• targetTouches：特定事件目标的touch对象数组
• changeTouches：上次触摸改变的touch对象数组

这些数组中包含touch对象，每个touch对象包含属性

-clientX：触摸目标在视口中的x坐标
-clientY：触摸目标在视口中的y坐标
-identifier：标识触摸的唯一ID
-pageX：触摸目标在页面中的x坐标（包含滚动）
-pageY：触摸目标在页面中的y坐标（包含滚动）
-screenX：触摸目标在屏幕中的x坐标
-screenY：触摸目标在屏幕中的y坐标
-target：触摸的DOM节点目标

弹性滚动

下拉刷新