深入学习之h5 以及媒体查询

<!--PC端我们现在也使用这些新增加的语义化标签来实现我们的布局,但是在IE6~8中不兼容:引入HTML5.js实现兼容处理-->

     #div1:hover {

            /*top: -200px;*/

            /*-webkit-transform: translate(0, -200px);

            transform: translate(0, -200px);*/

            /*我们对于这些变换的效果最好使用-webkit-transform，因为这个属性开启了浏览器的硬件加速效果，实现的动画性能比使用具体的样式流畅一些*/

            /*-webkit-transform: scale(2) rotate(45deg) skew(45deg);

            transform: scale(2) rotate(45deg) skew(45deg);*/

            /*-webkit-transform不是动画，它只是一个变形效果，不设置动画，立马变形到指定的样式，加上动画后才能有对应的过渡效果*/

        }

        /*使用媒体查询触发动画*/

        @media screen and (min-width: 320px) {

        }

        @media all and (orientation: landscape) {

            #div1 {

                background: #FFCC66;

            }

        }