移动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节点目标

弹性滚动

下拉刷新

推荐阅读更多精彩内容