探讨判断横竖屏的最佳实现

在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 CSS Media Queries 通过媒体查询的方式,我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式: 1.内联样式

2.外联样式

window.matchMedia() 除此之外,CSS Object Model(CSSOM)Views 规范增加了对 JavaScript 操作 CSS Media Queries 的原生支持,它在 window 对象下增加了 matchMedia() 方法,让我们能够通过脚本的方式来实现媒体查询。 window.matchMedia() 方法接受一个 Media Queries 语句的字符串作为参数,返回一个 MediaQueryList 对象。该对象有 media 和 matches 两个属性: media:返回所查询的 Media Queries 语句字符串 matches:返回一个布尔值,表示当前环境是否匹配查询语句 同时,它还包含了两个方法,用来监听事件: addListener(callback):绑定回调 callback 函数 removeListener(callback):注销回调 callback 函数 那么,通过 window.matchMedia() 的方法,我们可以这样判断横竖屏:

通过Can I Use […]

CSS3动画实践 – 2017京东集团开年大会项目有趣的动画实现

2017京东集团开年大会在 2 月 10 日终于开始了,当然,也结束了。 微信朋友圈里纷纷表示: 成功保持工作几年来从来没有中过奖的记录。 完美错过所有大奖,新的一年大家工作顺利。 一如既往,成功避开所有奖项 虽然没有中奖,但是大家在年会等待开奖期间还是有不少好玩的东西可以消遣的。下面就为大家介绍两个基于 CSS3 做的动画效果:一个是在朋友圈广为扩散、略显逼格的「京彩AR」,一个是严肃认真、指导场内人员的「员工参会电子手册」。 先睹为快吧: 京彩AR 员工参会电子手册         京彩AR 要做好一个 CSS3 动画,既要关注性能,流畅不卡顿,适配各种分辨率的手机屏幕,还需要关注作品是否自然,动画过渡流畅生动。在接到项目需求时,我们的内心是崩溃的,不过幸好有友爱的设计师和强力的前端指导,最终完成了所有动画效果。 设计师 「 陈秀峰 」美女给的设计稿如下,包括初始加载动画、仿微信锁屏消息通知、仿微信聊天界面以及一个加载动画的 gif 演示图。 页面中存在宇航员 Joy、星球、消息块以及若干修饰元素。根据页面所需动画效果的粒度和页面结构,我们将设计稿按下面指示切出素材。 宇航员 Joy 宇航员 Joy 部分的动画最为复杂,它的元素很多,组织好各个元素的出场,在场及退场的时间和顺序是一个极具挑战的。首先我们将元素分布画出来: 我们将距离屏幕最近的左下角星球作为太空运行中心,其余的星球和流星围绕中心运转。对于星球、流星、火箭等这里基本采用的是直线运动,主要是控制运动的速度和直线的角度,还有就是元素前后关系。两点决定一个直线的的轨迹,所以设定各个元素的起始点、终止点以及帧动画运动的时间,例如流星位移利用 translate3d 更改 X 和 Y 的坐标值,将元素移出视窗外。

而宇航员 Joy 脚下的火焰,则利用了精灵动画来处理,首先切一个完整的精灵图,然后用背景图的位移 background-position 来控制动画效果。

我们利用 animation属性的 steps 函数做关键帧的划分,这个函数和接下来要讲的贝塞尔函数是 animation-timing-function 的两个可选函数,实际使用中我们经常会忽略 steps 函数的使用。 […]

CSS 3D Panorama – 淘宝造物节技术剖析

前言 3D 全景并不是什么新鲜事物了,但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当,也是能实现类似的效果。换句话说,3D 全景其实就是 CSS3 3D 的应用场景之一。 准备 在实现 CSS3 3D 全景之前,我们先理清部分 CSS3 Transform 属性: transform-origin:元素变形的原点(默认值为 50% 50% 0,该数值和后续提及的百分比均默认基于元素自身的宽高算出具体数值); perspective:指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。(默认值:none,值只能是绝对长度,即负数是非法值); transform-style:用于指定其为子元素提供2D还是3D的场景。另外,该属性是非继承的; transform:该属性能让你修改CSS可视化模型的坐标空间,其中包括 平移(translate)、旋转(rotate)、缩放(scale) 和 扭曲(skew)。 下面对上述的一些点进行更深入的分析: 对于 perspective,该属性指定了“眼睛”与元素的 perspective-origin (默认值是 50% 50%)点的距离。那么问题来了:“当我们应用 px 作为衡量单位时,那它的实际距离该如何量化呢(即如何得到我们熟悉且易于表达的距离)?” 答:当我们的屏幕的分辨率是1080P(1920*1080px),且该元素或祖先元素的 perspective 值是 1920px 时,该应用了 CSS3 3D Transform 的元素的立体效果就相当于我们在距离一个屏幕宽度(1920px)的屏幕前观看该元素的真实效果。尽管如此,目前我也不清楚如何准确地为元素设置一个合适的 perspective 值,只能猜测个大概值,然后再动态修改值,以达到满意的呈现效果。 根据 相似三角形 的性质可计算出被前移的元素最终在屏幕上显示的实际大小 […]

© 2017 JDC. All Rights Reserved.