zoukankan      html  css  js  c++  java
  • 调整页面百分比

    不会写页面响应式的同学,可以直接拿去用!!!这里的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);                
                });
    人还是要有梦想的,万一实现了呢!
  • 相关阅读:
    NTDDI_VERSION,_WIN32_WINNT,WINVER,_WIN32_IE
    SOL_SOCKET, SO_KEEPALIVE
    荣幸的一天
    值得思考的一些东西
    一个flash前后台开源框架的的站点
    30个AS3开源项目
    [算法] doj 1066 最长上升子序列
    [算法] doj 1605 Common Subsequence 公共子序列
    华为EC321CDMA PCMICA 无线网卡Ubuntu下使用
    my_judged.cc 的初稿
  • 原文地址:https://www.cnblogs.com/nannan1221/p/7888998.html
Copyright © 2011-2022 走看看