检测移动设备横竖屏

  • 使用场景

移动端的开发过程中,免不了要判断横竖屏,然后在执行其他操作,比如分别加载不同样式,横屏显示某些内容,竖屏显示其他内容等等。

  • 如何判断

移动设备提供了两个对象,一个属性,一个事件:

  • window.orientation   属于window对象上一个属性;共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式。
  • orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。

这两个搭配起来使用,很容易就能获得设备的横竖屏状态,代码如下:

(function(){
    var init = function(){
        var updateOrientation = function(){
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                    orientation = 'landscape';
                    break;
                default:
                    orientation = 'portrait';
                    break;
            }

           //do something
           //比如在html标签加一个状态
            //然后根据不同状态,显示不同大小
            document.body.parentNode.setAttribute('class',orientation);
        };

        window.addEventListener('orientationchange',updateOrientation,false);
        updateOrientation();
    };

    window.addEventListener('DOMContentLoaded',init,false);
})();

在css中就可以这样写:

/**竖屏 div边框显示蓝色**/
.portrait body div{
    border:1px solid blue;
}
/**竖屏 div边框显示黄色**/
.landscape body div{
    border:1px solid yellow;
}

当然还可以使用media queries的方式(推荐这种):

@media all and (orientation: portrait) {
  body div {
    border:1px solid blue;
  }
}
@media all and (orientation: landscape) {
  body div {
    border:1px solid yellow;
  }
}

Categories: 学习与阅读, 实用知识点, 工作记录, 网络转载, 设计前沿

8种移动APP导航设计模式大对比

也许我们对比和了解了其他一些常用的APP导航设计模式。

而且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。

之前跟大家分享过6个超实用的APP导航设计方案和3种常见的APP导航设计方案优劣势分析有一些优秀的app基于这些模式做了一些创新的优化方案,本文总结了目前通用且流行的模式,并讨论了这些模式适用的场景,希望帮助交互设计师更快的作出较合理的信息组织决策。

先来看看8种移动APP导航设计模式对比图吧!

Categories: CSS设计

网页动画的十二原则(转载)

原文地址: Animation Principles for the Web

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。

动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

迪士尼经过基础工作练习的长时间累积,在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。

在本文中,我会逐个介绍这十二个原则,并讨论它们怎样运用在网页中。你能在 Codepen 找到它们 全部的开源 HTML 和 CSS 代码

Categories: CSS3动画, CSS设计, 实用知识点, 故事, 经验分享, 网址分享, 网络转载, 设计前沿