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>
  • 相关阅读:
    图像分割之Dense Prediction with Attentive Feature Aggregation
    与中文对齐的英文等宽字体
    管家订菜与Scrum流程
    说说自己在2014年的阅读思路
    Hello World
    Bootstrap实现轮播
    普通Apache的安装与卸载
    Python中OS模块
    Python中文件读写
    Python装饰器
  • 原文地址:https://www.cnblogs.com/hdwang/p/8120590.html
Copyright © 2011-2022 走看看