zoukankan      html  css  js  c++  java
  • 网页自动压缩宽高比例,动态响应html

    <script type="text/javascript">
            
            //自调用函数
             (function () {
                // 1、页面一加载就要知道页面宽度计算
                var setFont = function () {
                    //获取body
                    let body = document.body;
                    //计算比例宽度
                    let widthRatio =body.offsetWidth / (1920);
                    //计算比例高度
                    let heightRatio = $(window).height()  / (937);
                    console.log($(window).height() );
                    //修改比例
                    body.setAttribute("style","transform: scale(" + widthRatio  + ", " + heightRatio  + ")")
                }
                setFont();
                // 2、页面改变的时候也需要设置
                // 尺寸改变事件
                window.onresize = function () {
                   setFont();
                }
            })();
             </script>

    body添加样式

    transform-origin: left top;

    可以正常计算缩放

  • 相关阅读:
    Hibernate
    Mysql
    JavaWeb
    Springboot
    spring MVC
    spring
    mybatis学习
    ftp客户端封装
    win10子系统 wsl开机启动ssh服务
    eclipse 终于官方支持代码模糊提示了
  • 原文地址:https://www.cnblogs.com/njccqx/p/13748716.html
Copyright © 2011-2022 走看看