第134天:移动web开发的一些总结(二)

1、响应式布局

开发一个页面,在所有的设备上都能够完美展示。

媒体查询:@media screen and (max-width:100px) { }

媒体类型:screen(屏幕)

print(打印机) handheld(手持设备) all(通用)

常用媒体查询参数:

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation:检查设备处于横向(landscape)还是竖屏(portrait)

2、响应式设计设计点

设计点一:百分比布局

仅仅使用媒体查询来适应不同固定宽度设计,只会从一组css到另一组css的切换。两种设计之间没有任何平滑渐变。只使用媒体查询,布局有时会变得不可控制。 当然,这只是建议,也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。

设计点二:弹性图片

思路:无论何时,全都包在图片的元素宽度范围内,以最大的宽度同比完整的显示图片。

img{ max-height: 100% }

设计点三:重新布局,显示与隐藏

当页面达到手机屏幕宽度的时候,很多时候就要放弃一些传统的页面设计思想。力求页面简单,做如下处理: ① 同比例缩减元素尺寸 ② 调整页面结构布局 ③ 隐藏冗余的元素 经常需要切换位置元素使用【绝对定位】,减少重绘提高渲染性能。

关于响应式设计的思考:

根据响应式设计的理念,一个页面包含所有设备不同屏幕的样式和图片,当一个移动设备访问一个响应式的页面,就会下载pc,笔记本,ipad等不同设备对应的样式。而这些样式却是冗余的,完全没有用。 权衡利弊:性能不是最优,但是能减少重复开发。

3、 特殊样式处理

(1) 高清图片

在移动web页面上渲染图片,为了避免图片产生模糊,图片的宽度应该用物理像素单位渲染,即是100 * 100的图片,应该使用100dp * 10dp。 width:(w_value/dpr)px; height:(w_height/dpr)px;

(2) 一像素边框

同样是retina屏幕下的问题,根本原因:1px使用2dp渲染。 border:0.5px;(错误),仅仅ios8可以使用 通用方案:scaleY(0.5)

(3) 相对单位rem

为了适应各大屏幕的手机,px略显固定,不能根据尺寸的大小而改变,使用相对单位更能体验页面兼容性。 em:是根据父节点的font-size为相对单位 rem:是根据html的font-size为相对单位 em在多层嵌套下,变得非常难以维护,rem更加能作为全局统一设置的度量 那么,rem的基值设置为多少比较好? 回归目的:为了适应各大手机屏幕 rem = screen.width / 20

不使用rem的情况:font-size

一般来讲font-size是不应该使用rem的相对单位的。因为字体的大小是趋向于阅读的实用性,并不适合于排版布局。 同理,趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致(跟rem的目的相反)。

(4) 多行文本溢出•••

单行文本溢出,对title类的使用非常多,而多行文本类,在详情介绍则用的比较多。

 1 //单行文本溢出…
 2 .inaline {
 3     overflow: hidden;
 4     white-space: nowrap;
 5     text-overflow: ellipsis;
 6 }
 7 //多行文本溢出…
 8 .intwoline {
 9     display: -webkit-box: !important;
10     overflow: hidden;
11 
12     text-overflow: ellipsis;
13     word-break: break-all;
14 
15     -webkit-box-orient: vertical;
16 -webkit-line-clamp: 4;
17 }

4、 终端交互优化

对click事件say no
弹性滚动
上拉刷新
tap事件基础
touch触摸事件
下拉加载
300ms:

移动web页面上的click事件响应都要慢上300ms 用300ms判断是单击还是双击

(1) tap基础事件

300ms延迟怎么破?tap事件代替click事件。自定义tao事件原理: 在touchstart、touchend的记录时间、手指位置,在touchend时进行比较,如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短(一般认为是200ms),且过程中未曾触发过touchmove,即可认为触发了手持设备上的“click”,一般称它为“tap”。

tap“点透”的bug: 有两层,点击第一层的时候,如果点击的区域在第二层的范围内,那么第二层也会被触发。(原因与300ms有关)

tap透传的解决方案: ①使用缓存动画,过渡300ms的延迟 ②中间层dom元素的加入,让中间层接收这个“穿透”事件,稍后隐藏 ③“上下”都使用tap事件,原理上解决tap穿透事件,(但是不可避免原生标签的click事件,如a,input)。 ③ 改用Fastclick的库(听过最新的zepto已经fixed掉这个bug)

(2) Touch基础事件

触摸才是移动设备的交互的核心事件,支持多点触摸。 touchstart:手指触摸屏幕触发(已经有手指放屏幕上不会出发) touchmove:手指在屏幕上滑动,连续触发 touchend:手指离开屏幕时触发 touchcancel:系统取消touch时候触发(不常用)eg:滑动页面时来了一个电话或者其他系统事件

除常见的事件属性外,触摸事件包含专有的触摸属性: touches:跟踪触摸操作的touch对象数组 targetTouches:特定事件目标的touch对象数组 changeTouches:上次触摸改变的touch对象数组

一个小BUG: android只会触发一次touchstart,一次touchmove,touchend不触发。(4.0,4.1有,4.2修复没有了,4.4开始又出现了)

解决方案: 在touchmove中加入:event.preventDefault(),可fixedBug。

但注意:event.preventDefault()会导致默认行为不发生,如scroll,导致页面不滚动!如果页面带有滚动条,就需要考虑更换解决方案。

(3) 弹性滚动,下拉刷新

①弹性滚动:当客户端的页面滚动到顶部或底部的时候,滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果,带给用户良好的体验。 移动web页面也是拥有这样的能力的,但滚动有几种情况需要考虑: body层滚动:(系统特殊化处理) 自带弹性滚动,overflow:hidden失效,GIF和定时器暂停。 局部滚动:没有弹性滚动,没有滚动惯性,不流畅。 局部滚动开启弹性滚动:

body {
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}
但注意:android不支持原生的弹性滚动!但可以借助三方库iScroll来实现

②下拉刷新:顶端下拉一小点距离,页面弹性滚动向下。 ④ 上拉加载:使用scroll事件,而不是touch事件(android有bug)

(4) Canvas & GPU render【GPU 渲染】

优化技巧: canvas代替img标签 drawImage(image,x,y);canvas上绘制图片 drawImage(image,x,y,width,height);canvas上绘制缩放图片

原因: img使用浏览器渲染,当图片特别大且手机性能不是很好的情况下,会特别卡,通常表现在滑动图片。因为没有触发物理设备本身的GPU(图形处理器)渲染

image object:

① 预加载图片:当设置img.src=””的时候,就表示请求加载图片 ② 图片的按比例缩放

(5) css3 animation

当一个css3动画结束时,我们可以监听相关事件AnimationEnd,比如对于webkit来说,是webkitAnimationEnd。

5、 跨终端web

① 单域 - Media Query ② 单域 – 多模板 ③ 多域 – 跳转(很原始) ④ 多平台 App

(1) 移动优先:

① 移动端的用户和流量越来越多 ② 各种屏幕让我们更聚焦业务的本领 ③ 移动设备有更先进的人机交互体验

(2) 多终端检测
(3) 接口:结构:通用接口,

接口模型:前端消费者;后端生产者;测试监督者

6、零碎的细节

1)CSS3动画,代替DOM animation,效率更高,因为css3直接使用浏览器的GPU(图形处理器)渲染

2) 当你给一个元素设置它的百分比宽度的时候,他需要一个比照,也就是父元素,但是当它没有父的时候,需要给他一个绝对定位absolute值,但是在移动开发中,给整个整块的页面使用position: absolute;很占用内存,特别是当内容比较多的时候,会非常明显。会有几个后果:在ios下,会导致浏览器直接崩溃掉;在android下,会导致非常非常的卡。所以建议直接用js计算。

3)将图片显示到一排上,不使用浮动,使用-webkit-transform:translate3d(0,0,0); position: absolute;

4)new Date() * 1;// * 1 ,进行数值运算,转换为数字形式的时间戳

5)

self.startX = evt.touches[0].pageX; //记录开始的位移,touches包含着所有手指触摸在屏幕上的点的集合
-webkit-backface-visibility:hidden;/* 防止闪白 */

6)更多图片的优化,保留3个要使用的节点,当前的,上一个,下一个图片的节点,剩余的不需要的删除

7)jQuery Mobile(JQM jQMobile) 是jQuery在手机上和平板设备上的版本,是创建移动web app的框架。

8)2048制作过程中遇到的bug:(见9(2)touch基础事件BUG)

// 手机上手指识别无用,chrome19827号错误:touchevent不被触发。防止没有正确使用preventDefault()
document.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

10)使用Dropbox发布自己的web app 免费 限制: ① 静态网站 ② 速度较慢(在国外) ③ 域名不宜记忆 11)web app、native app和hybrid app(混合模式)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1042
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

4262
来自专栏编程

《小白HTML5成长之路35》再做一个顶部的提示信息

最近天气干燥,小白和老朱都感冒了,虽然状态不好,小白还是没有停止HTML5前进的脚步,他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室,小...

2189
来自专栏JadePeng的技术博客

jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发...

3716
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

44115
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

5127
来自专栏GIS讲堂

openlayers4中用font设置图标样式

font其实是个好东西,不论是写css还是。。。,这不,牛老师想把它用在openlayers4中,用以很方便的设置图标的大小、颜色,还不失真,东拼西凑,终于算是...

1751
来自专栏Android机动车

Web App 一分钟适配 iPhone X

iPhone X 已经开抢了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

772
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

2337
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

1413

扫码关注云+社区

领取腾讯云代金券