• 调整页面百分比


    不会写页面响应式的同学,可以直接拿去用!!!这里的1920,可以改为psd页面原有尺寸680或者720,这样就不用整个页面手动计算百分比啦!

     1                             
     2     <script type="text/javascript">
     3         function bodyScale() {
     4             var devicewidth = document.documentElement.clientWidth;
     5             var scale = devicewidth / 1920;
     6             document.body.style.zoom = scale;
     7         }
     8         window.onload = window.onresize = function() {
     9             bodyScale();
    10         }
    11     </script>

    手机端使用页面百分比往往会出现,pc端放太大会很模糊,有些同学就想让手机移动端百分比响应,然后当在pc端的时候能够不要放大,在屏幕中间正常显示页面,那么就需要用js来获取屏幕宽度来处理多媒体。

    /页面百分比宽度自适应
    var result = window.matchMedia('(min-1200px)');
    var result2 = window.matchMedia('(min-992px)');
    var result3 = window.matchMedia('(min-768px)');
    if (result.matches) {
        console.log("大屏幕(>=1200)");
    } else if (result2.matches) {
        console.log("中等屏幕(>=992&<=1200)");
    } else if (result3.matches) {
        console.log("小屏幕(>=768&<=992)");
    } else {
    
        function bodyScale() {
            var devicewidth = document.documentElement.clientWidth;
            var scale = devicewidth / 640;
            document.body.style.zoom = scale;    
        }
        window.onload = window.onresize = function() {
            bodyScale();
        }
        console.log("超小屏幕(<=768)");
    }
    //窗体大小改变自动刷新页面
    $(window).resize(function() {
            console.log("窗体大小改变了!");
            location.reload(true);                
                });
    人还是要有梦想的,万一实现了呢!
  • 相关阅读:
    day_13
    day_12
    day_11
    day_10
    day_09
    day_08
    day_07
    day_06
    cmder 基本配置和使用
    php自动加载
  • 原文地址:https://www.cnblogs.com/nannan1221/p/7888998.html
Copyright © 2020-2023  润新知