动画工具,移动端自适应方案

DOM元素querySelectorAll可能让你意外的特性表现

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

原文出处:
张鑫旭   

移动端自适应方案

2015/09/14 ·
JavaScript,
基础技术 ·
移动端,
自适应

原文出处:
大搜车前端团队博客   

前方依旧高能 ^_^ , 本文主要解决以下问题:

  • 真的需要动态生成viewport吗?
  • 如何自适应?

然后给出主观的最佳实践。

  • 最帅的flex

赶时间戳这里传送门

比较无聊干燥的文章,看前请喝水。

研究样本

  1. 手淘 ml.js
  2. 天猫首页
  3. 手机携程

一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事。回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下。

研究结论

  1. 手淘

    • 获取手机dpr(window.devicePixelRatio),动态生成viewport。
    • 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸。
    • 根据设计稿尺寸(px)通过计算,转换成rem去布局。

    ps:海外淘宝并没有这样做,而是scale1.0并且图片大概都是2倍图。

  2. 天猫

    • 采用scale=1.0 写死viewport。
    • flex布局,笃定认为布局尺寸是375 (iPhone6)
    • rem 确定非flex的元素
  3. 手机携程
    • 采用scale=1.0 写死viewport
    • px + 百分比布局

实现之前

提及实现之前,先简单过一些概念。

完美视口

完美视口的概念已经街知巷闻了,如果不知道可以先戳这里。

在这几篇文章里,还会学会设备像素,css像素等概念,大神讲的很透彻,这里就不献丑了。

ppk 谈
viewport其1 ppk 谈
viewport其2 ppk 谈
viewport其3

这里给出完美视口

XHTML

<meta name=”viewport”
content=”initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0″/>

1
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

在移动端,低端无定制的需求,都可以用这个完美视口完成。然而看到这篇文章的你,显然完美视口还不能满足。

dpr

dpr是devicePixelRatio的简写,也就是屏幕分辩比

历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

1
历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

坊间对于dpr更通俗的说法叫

  • 一倍屏
  • 两倍屏
  • 三倍屏

scale

scale是屏幕拉伸比。也就是视口上的initial-scale , maximum-sacle 等属性。

scale 和 dpr的关系是倒数。

1
scale 和 dpr的关系是倒数。

直观感受

这是我对dpr的直观感受图片 1

同样去展示 1 x 1 像素的点,虽然在屏幕上看到的大小是一样,但背后表现它的像素数量是不同。

这也意味着,在一样大小的面积内,更多物理像素的屏幕上展现色彩的能力越强。

但这不是我要关注的点,我们关注的是。

1. 是否需要根据倍屏去切换scale达到伸缩的目的

2. 切换scale的成本和回报

下面根据几个实验来回答这两个问题。

自适应问题

实验1 - 传说中的1px

大多数给出要动态切换scale的理由有以下两个。

  1. 1px并不是 [ 真实的1px ] , 2.
    为了充分利用屏幕的分辨率,使用符合屏幕的图片。
1
2
3
1. 1px并不是 [ 真实的1px ] ,
 
2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

11 个 HTML5 动画工具

2015/11/16 · HTML5 ·
动画

原文出处:
devzum   译文出处:[PHP100

  • Zeroing]()   

如今,在Web开发中最为流行的语言就是HTML5了,它帮助开发者将多样化的内容展现给用户。在过去两三年中,我们共同看到了HTML5的发展,它逐渐在网络的世界中积累了名气和流行度。HTML常常会给我们带来新的技术和特性,使得前端技术不断的发展强大。HTML5受到欢迎的原因也在于它给用户带来的极大便利,当前的大多数浏览器,如Chrome、Firefox、IE等都对它给予支持。

HTML5使得开发者能为你的网站创建出惊人的动画效果。这些很棒的动画效果会为你的网站增添更多吸引力,接着会带来更多的生意。这些用HTML5创建的动画效果很出色,看起来很惊人。但为了做出这种动画效果,你需要经历很多比较麻烦的工作,所以你可以使用一些免费或市面上收费的HTML5动画工具。

本文将会为大家介绍市面上最好的HTML5动画工具。这个清单使我们极为用心列出来的,以为大家呈现出真正有用且专业的HTML5动画工具。所以接着读下去并找到最符合你需求的那个工具吧,以下每个工具都有它独特的地方。

一、时间紧急,废话少说

本文所在的页面藏匿了下面这些代码:

<img id=”outside”> <div id=”my-id”> <img id=”inside”>
<div class=”lonely”></div> <div class=”outer”> <div
class=”inner”></div> </div> </div>

1
2
3
4
5
6
7
8
<img id="outside">
<div id="my-id">
    <img id="inside">
    <div class="lonely"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

就是下面这样的表现(为了便于观察,我加了边框背景色和文字):

图片 2

首先说点大家都知道的热热身。

  • querySelectorquerySelectorAll IE8+浏览器支持。
  • querySelector返回的是单个DOM元素;querySelectorAll返回的是NodeList.
  • 我们一般用的多的是document.querySelectorAll,
    实际上,也支持dom.querySelectorAll.例如:
JavaScript

document.querySelector("\#my-id").querySelectorAll("img")

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
</div>
</div></td>
</tr>
</tbody>
</table>

选择的就是里面这个妹子。例如,我在控制台输出该选择NodeList的长度和id,如下截图:
图片 3

好了,上面都是众所周知的,好,下面开始展示点有意思的。

大家看下下面2行简单的查询语句:

JavaScript

document.querySelectorAll(“#my-id div div”);

1
document.querySelectorAll("#my-id div div");

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”);

1
document.querySelector("#my-id").querySelectorAll("div div");

图片 4

提问:上面两个语句返回的NodeList的内容是否是一样的?

给大家1分钟的时间思考下。

//zxx: 假设1分钟已经过去了

好了,答案是:不一样的。估计不少人跟我一样,会认为是一样的。

实际上:

JavaScript

document.querySelectorAll(“#my-id div div”).length === 1;

1
document.querySelectorAll("#my-id div div").length === 1;

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”).length ===
3;

1
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

大家如果有疑问,可以在控制台测试下,下图就是我自己测试的结果:

图片 5

为啥会这样?

第一个符合我们的理解,不解释。那下一个语句,为何返回的NodeList长度是3呢?

首先,遍历该NodeList会发现,查询的三个dom元素为:div.lonelydiv.outerdiv.inner.

奇怪,奇怪,怎么会是3个呢?

jQuery中有个find()方法,大家很可能受到这个方法影响,导致出现了一些认知的问题:

JavaScript

$(“#my-id”).find(“div div”).length === 1;

1
$("#my-id").find("div div").length === 1;

如果使用find方法,则是1个匹配;由于结构和作用类似,我们很自然疑问原生的querySelectorAll也是这个套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就可以了,我特意加粗标红:

CSS选择器是独立于整个页面的!

什么意思呢?比如说你在页面很深的一个DOM里面写上:

<style> div div { } </style>

1
2
3
<style>
div div { }
</style>

 

整个网页,包括父级,只要是满足div div父子关系的元素,全部会被选中,对吧,这个大家应该都清楚的。

这里的querySelectorAll里面的选择器也同样是这也全局特性。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文就是:查询#my-id的子元素,同时满足整个页面下div div选择器条件的DOM元素们。

我们页面往上滚动看看原始的HTML结构,会发现,在全局视野下,div.lonelydiv.outerdiv.inner全部都满足div div这个选择器条件,于是,最终返回的长度为3.

真实的1px

这一条和设计稿密切想关,要讨论它不能抛开设计稿不谈。

这里先补一下切图课,如果自己要做1x , 2x, 3x 的设计稿。如何去实现?

尺寸!!!

大多数情况下,设计师产出各种尺寸的稿子(事实上一般只是2倍稿子),都是先画出大尺寸的稿子,再去缩小尺寸,最后导出。
这样会带来问题:

如果设计师在2倍稿子里画了一条1px的线,这时候假如我们要在scale=1.0里呈现的话,就会变成0.5px,如下图。

图片 6

而很大一部分手机是无法画出0.5px的,因此这里一般有一个hack

CSS

transform:scaleX(0.5)或transform:scaleY(0.5)

1
transform:scaleX(0.5)或transform:scaleY(0.5)

但是有人提出了,
既然可以改变viewport的scale达到合理利用不同倍屏的优势,为什么不这么写呢。

XHTML

<meta name=”viewport”
content=”initial-scale=2.0,width=device-width/>

1
<meta name="viewport" content="initial-scale=2.0,width=device-width/>

等等,为了设计稿的尺寸我们如此大费周章?

事实上,即使2x设计稿避免了1px。3x设计稿也可能出现2px。

而且这里如果写死scale可能造成部分地方和稿子出入较大,无法还原设计稿,界面的显示会打折扣。

解决这个问题的关键在于:交流

  • 如果你的设计师是个要求严格,而且产品界面把控非常严格的话,应该动态去实现viewport或使用scale的hack去改变。
  • 如果部分区域实在没有必要[ 过度优化 ], scale=1.0
    实在是非常低成本还原的方案,未尝不可。

1. Mixeek

这是一款用来设计和运行Web动画和交互的免费应用工具。它基于JavaScript,CSS3和HTML5,它有着轻量级、已使用的特点。

二、:scope与区域选择限制

其实,要想querySelectorAll后面选择器不受全局影响,也是有办法的,就是使用目前还处于实验阶段的:scope伪类,其作用就是让CSS是在某一范围内使用。此伪类在CSS中使用是大头,但是也可以在querySelectorAll语句中使用:

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“:scope div div”);

1
document.querySelector("#my-id").querySelectorAll(":scope div div");

兼容性如下:

图片 7

我写此文时候是15年11月初,目前基本上就FireFox浏览器支持,我估计,以后,会支持越来越多的。为什么呢?

因为Web
Components需要它,可以实现真正独立封装,不会受外界影响的HTML组件。

关于:scope目前支持尚浅,时机未到,我就没必要乱展开了,点到为止。

对应倍图

对于这一点,争议较多,因为如果要做到对应倍图的话,意味着图片都需要做三份。成本太高了。

这里通常有两种做法

  1. 图片服务

    例如在100×100的图片容器中。

1倍图 http:// img.xxx.com/abc.jpg\_100x100 2倍图 http://
img.xxx.com/abc.jpg\_200x200 3倍图 http://
img.xxx.com/abc.jpg\_300x300

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d5d723297616-1" class="crayon-line">
1倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-2" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_100x100
</div>
<div id="crayon-5b8f19d520d5d723297616-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-4" class="crayon-line crayon-striped-line">
 2倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-5" class="crayon-line">
 http:// img.xxx.com/abc.jpg_200x200
</div>
<div id="crayon-5b8f19d520d5d723297616-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-7" class="crayon-line">
 3倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-8" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_300x300
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 定死尺寸

    放弃1屏手机,全部启用2倍图,由于流量会消耗比较大(低端机),因此滚动加载等优化手段就会显得比较重要了。

实验1 – scale对倍图重要吗

这里看一下不同scale下图片的差异。

  • 测试样本:160×160凯尔特人队标logo(一不小心暴露了绿色的血液)
  • 测试容器:160×160 img标签
  • 测试环境: intial-scale分别为1.0 / 0.5 / 0.3333
  • 图片尺寸: 1x(160×160) 2x(320×320) 3x(480×480)

图片 8

测试结论:不同scale下使用不同图片差异非常大。

但是这里需要验证,是否不同scale同一图片差异起到绝对作用。

图片 9

  • 肉眼观看基本无区别,除了用取色器去获取,会发现有色差和部分像素被分割(下面会说到),之外,用不同scale显示同一图片基本没有什么区别。

实验2 – DownSampling

由于上一个实验最后的图片,使用同一scale下,不同倍数的图片,存在色差,这里验证一下。

  • 测试方案

    测试图片:

 图片 10

图片尺寸: 400×300 , 300×225 , 200×150 , 100×75

测试环境: scale = 1.0

测试容器: 100×75的 img元素

由于之前知道了DownSampling概念的存在,这里只是好奇心驱动试验一下。(对自适应其实没有卵用)

DownSampling是说大图放入比图片尺寸小的容器中的时候,出现像素分割成就近色的情况。

测试结果:

图片 11

注:6plus貌似和其他机型不同。

触发情况: 不同颜色像素接触的地方,会出现DownSampling。

图片 12

rem

对于rem要说的不多,看这张图。对于用到px的元素,使用rem统一去管理是很灵活的!

图片 13

字体

无论是采用动态生成viewport或者写死scale,字体都需要适配大屏。之前提出的rem方案被证实在不同手机上显示不一致,这里还是回归成了px。

px最好用双数

两种方案(这里不考虑媒体查询,因为Android碎..,嗯,不说了…)

  1. JS动态计算(常见做法)
根据不同屏幕宽度计算不同字号大小。 1.
定基准值,设计稿是750宽度(2倍屏),字体的大小是24px. 2.
计算指定宽度的字体大小。 var fontSize = width / 750 \* 24 ;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d62124238623-1" class="crayon-line">
根据不同屏幕宽度计算不同字号大小。
</div>
<div id="crayon-5b8f19d520d62124238623-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-3" class="crayon-line">
1. 定基准值,设计稿是750宽度(2倍屏),字体的大小是24px.
</div>
<div id="crayon-5b8f19d520d62124238623-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-5" class="crayon-line">
2. 计算指定宽度的字体大小。
</div>
<div id="crayon-5b8f19d520d62124238623-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-7" class="crayon-line">
var fontSize = width / 750 * 24 ;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 根据dpr设定 (比较好的做法)

    ps : 一般时初始化时设置为根元素html的attribute,

JavaScript

window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d65248160001-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d65248160001-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d65248160001-1" class="crayon-line">
   window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
</div>
<div id="crayon-5b8f19d520d65248160001-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

然后css这样写



CSS

\[dpr=1\] { font-size=16px; } \[dpr=2\] { font-size=32px; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d69092077898-1" class="crayon-line">
[dpr=1] {
</div>
<div id="crayon-5b8f19d520d69092077898-2" class="crayon-line crayon-striped-line">
       font-size=16px; 
</div>
<div id="crayon-5b8f19d520d69092077898-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f19d520d69092077898-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d69092077898-5" class="crayon-line">
[dpr=2] {
</div>
<div id="crayon-5b8f19d520d69092077898-6" class="crayon-line crayon-striped-line">
       font-size=32px; 
</div>
<div id="crayon-5b8f19d520d69092077898-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

布局

权衡之下,我觉得flex真的灵活方便太多,因此这里给出一个布局demo。大致如下图。(画的比较粗糙..)

(上稿下还原)

图片 14图片 15

基本涵盖:

  • 固定头部
  • 固定底部
  • 多列自适应
  • 高度自定义
  • 内容滚动

为什么flex能够做到百分比做不到的自适应。

比如我们也去学天猫,笃定认为宽度就是375(iPhone6尺寸),那么两个元素flex分别为200和175。

无需计算百分比,在不同的界面上就会自动计算,而且以该浏览器可以识别的最小单位实现,比自己计算的百分比要精准。

图片 16

demo传送门

结论

  1. 写死initial-scale=1.0 对于实现1px问题,
    问题比较大。与设计师沟通协商才是最好的解决问题的方法。
  2. 写死initial-scale=1.0 对于不同图片的显示,
    采用不同倍图的话,会有一定压缩,但在可接受范围内。(当然,动态生成scale能够完美呈现…)
  3. 布局

    如果采用动态生成viewport方案,就用到rem来还原设计稿(还有rem-px的计算)。成本在效率上。

    如果采用写死initial-scale=1.0方案,就用flex布局,主要成本在flex兼容性上,但是实现非常灵活简单。

后记

viewport的scale的重要性远比我想象的要低很多,我原本以为这就是自适应。

但是后来发现,其实自适应还是回到了远古时代的百分比%,只是现在有更聪明更灵活的方式flex,未来应该有两个方向去自适应。

  • 一个是拥抱vw,vh。(手淘的ml.js十等分宽度,1rem=10vw
  • 一个是更好的使用flex

现在使用后者已经有很多的库可以解决兼容性了,如参考资源最后的一个flex库。

调研的网站并不多,但是百分比仍然是很多人的首选。

参考资源

手淘ml库

手机淘宝

天猫首页

移动端高清、多平适配方案

rem对webapp带来的影响

flex方案 适配到IE10+

 

 

2 赞 10 收藏
评论

图片 17

2. Animatron

它主要用来设计和发布动画/交互的内容,包括在PC端和手机端两个地方。

三、结语还是要的

参考文章:querySelectorAll from an element probably doesn’t do what you
think it
does

感谢阅读,欢迎纠错,欢迎交流!

1 赞 1 收藏
评论

图片 17

3. Tumult Hype

设计师们可以用它创造出漂亮的Web内容,而且几乎不用任何的Coding,可以运行在桌面、手机和Pad上。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, ,
网站地图xml地图