zoukankan      html  css  js  c++  java
  • div按照屏幕尺寸(设备大小)进行缩放

    原理:利用css3 transform 属性

    代码:

    body{
                width: 810px;
                height: 340px;
                margin: 0px;
                padding: 0px;
                background-color: #2e2423;
                display: none; /**先隐藏,缩放后再显示,防止闪烁**/
            }
    <!--  脚本 -->
    <script src="${rc.contextPath}/js/jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
    
        //缩放视图
        $(document).ready(function(){
            resizeDiv();
        });
    
        var resizeDiv = function(){
            var width = $(window).width();
            var height = $(window).height();
            var scaleX = width/810; //设备默认宽度为810px
            var scaleY = height/340; //设备默认高度为340px
    
            //按设备比例缩放div的比例
            var scaleFunc = "scale("+scaleX+","+scaleY+")";
    
            $('body').css({
                "transform":scaleFunc, //缩放比例
                "transform-origin":"left top", //缩放基点
    
                "-ms-transform":scaleFunc,     /* IE 9 */
                "-ms-transform-origin":"left top",
    
                "-moz-transform":scaleFunc,     /* Firefox */
                "-moz-transform-origin":"left top",
    
                "-webkit-transform":scaleFunc, /* Safari 和 Chrome */
                "-webkit-transform-origin":"left top",
    
                "-o-transform":scaleFunc,     /* Opera */
                "-o-transform-origin":"left top",
            });
    
            $('body').show();
        };
    </script>
  • 相关阅读:
    设计模式-装饰器模式
    自定义 RestTemplate 异常处理 (转)
    Jackson 高级应用
    Jackson 的 基本用法
    Jackson转换为Collection、Array
    Jackson中处理map中的null key 或者null value 及实体字段中的null value
    sed
    MySQL server has gone away 异常
    nl命令
    线程池
  • 原文地址:https://www.cnblogs.com/hdwang/p/8120590.html
Copyright © 2011-2022 走看看