HTML5和CSS3开发经验

一、DeviceOrientation事件实现摇一摇功能

　　DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。

　　devicemotion：设备传感器事件 accelerationIncludingGravity：获取设备加速度信息（返回x、y、z轴）.

　　accelerationIncludingGravity：返回获取设备加速度信息，x、y、z轴

<script>
    var SHAKE_THRESHOLD = 800;
    var last_update = 0;
    var x = y = z = last_x = last_y = last_z = 0;

    if (window.DeviceMotionEvent) {

        // DeviceMotion事件事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('本设备不支持devicemotion事件');
    }

    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;      // 返回获取设备加速度信息，x、y、z轴
        var curTime = new Date().getTime();
        if ((curTime - last_update) > 100) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
            var status = document.getElementById("status");
            if (speed > SHAKE_THRESHOLD) {
                var text = "x:"+x+"<br />y:"+y+"<br />z:"+z+"<br />speed:"+speed;
                status.innerHTML = text;
            }

            last_x = x;
            last_y = y;
            last_z = z;
        }
    }
</script>

 http://dtop.powereasy.net/Item.aspx?id=3621

 

二、动画侦听事件

　　CSS3动画结束后侦听动画，

　　1、transitionEnd：针对transition属性的动画

　　2、webkitAnimationEnd：针对animation属性的动画

<script>
    $(".box").click(function(){
        $(this).addClass("on");
        $(this)[0].addEventListener("transitionend", function(){
            $(".box").removeClass("on");
        }, false);
    })
</script>

 

三、常用事件

1、window.scrollTo(0,0);　　 隐藏地址栏

2、window.matchMedia();　 匹配媒体

3、navigator.connection;      决定手机是否运行在WiFi/3G等网络

4、window.devicePixelRatio;   决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)

5、window.navigator.onLine;  取得网络连接状态

6、window.navigator.standalone;   决定iPhone是否处于全屏状态

7、touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

8、gesture事件 (Apple only, iOS 2+):  gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

window.addEventListener("orientationchange", function(e){ //window.orientation(0 is portrait, 90 and -90 are landscape) }, false); window.addEventListener("deviceorientation", function(e){ //e.alpha //e.beta //e.gamma }, false); window.addEventListener("devicemotion", function(e){ //e.accelerationIncludingGravity.x //e.accelerationIncludingGravity.y //e.accelerationIncludingGravity.z }, false); 

9、element.webkitRequestFullScreen(); 调用全屏函数

 

四、requestAnimationFrame()动画接口

一、HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:

　　你可以用CSS3的animattion+keyframes;

　　你也可以用css3的transition;

　　你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;

　　当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

　　现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。

 

二、初识requestAnimationFrame

也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

 

1、基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。

requestAnimationFrame(callback)//callback为回调函数

 

2、一个简单的例子

模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。

为了演示方便加了一个运行按钮（看不到例子请刷新）。

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
复制代码
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);
复制代码

 

浏览器支持情况

既然还是草案状态下引入的一个功能，在使用全我们就需要关心一下各浏览器对它的支持情况了。就目前来说，主流现代浏览器都对它提供了支持，请看下图：

31+	26+	10+	19+	6+

 

 

五、CSS3 Animate动画样式库

官方：http://daneden.github.io/animate.css/

参考：http://www.tuicool.com/articles/NF3Q3a

库文件：HTML5+CSS3资料

 

六、手机和PC移动的兼容写法

1、先加入如下代码

 if ('ontouchstart' in window) { //手机浏览 
   touchstart="touchstart"; 
   touchmove="touchmove"; 
   touchend="touchend"; 
   touchcancel="touchcancel"; 

} else{ //pc浏览 
   touchstart='mousedown'; 
   touchmove='mousemove'; 
   touchend='mouseup'; 
   touchcancel='mouseout'; 
}

 

2、如下绑定触摸事件即可兼容触摸和非触摸设备

$(window,'body').on(touchend,function(){ 

});

 

七、rem与px的转换

　　rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

 

一、Rem的使用

　　前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

　　假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------        

 如果你要设置一个不同的值，那么需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

 html { font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */ }

 

二、为什么要使用rem

　　像em单位一样，在Responsive设计中使用rem单位非常有用。虽然他们都是相对单位，但使用rem单位可以避开很多层级的关系。因为em是相对于他的父元素的font-size，而rem是相对于根元素<html>。比如说h1设置了font-size为1rem之后，只要不重置html的font-size大小，无论他的父元素设置多大，对h1都不会有任何的影响。

 

实例：

<style type="text/css">
    html { font-size: 12px; }
    ul{ margin: 0; padding: 0; border: 0; list-style: none;}
    .box li{ border-bottom: 1px #d1ccc0 solid; height: 2.5rem; line-height: 2.5rem }
    .box-l, .box-r { width:48%; height: 3.5rem; line-height: 3.5rem; text-align: center; margin: 0 1%; float:left; border-radius: 0.833rem; }
    .box-l { background-color: #e44151; }
    .box-r { background-color: #e44151; }
    @media screen and (min-width: 480px) {
        html,body,button,input,select,textarea {
            font-size: 20.25px
        }
    }

    @media screen and (min-width: 600px) {
        html,body,button,input,select,textarea {
            font-size: 25px
        }
    }
</style>

<div class="box">
    <ul>
        <li>台间谍威逼利诱策反大陆女生</li>
        <li>台间谍威逼利诱策反大陆女生</li>
        <li>台间谍威逼利诱策反大陆女生</li>
        <li>台间谍威逼利诱策反大陆女生</li>
        <li>台间谍威逼利诱策反大陆女生</li>
        <li>台间谍威逼利诱策反大陆女生</li>
    </ul>
</div>

<div class="ind_cztx">
    <div class="box-l">充值</div>
    <div class="box-r">提现</div>
</div>

 

转载链接：http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html