zoukankan      html  css  js  c++  java
  • 关于设置网页自适应不同浏览器的问题解决

    在制作一个登录界面时遇到了这样一个问题,背景图片是一张大的图片,登录内容设计师设计的比较大,当我把图切出来之后,发现由于我的浏览器屏幕比较小,背景图片出现了滚动条,登录内容在小的屏幕下显得异常的大,这样我们就需要解决两个问题:1如何让背景图片完整的铺满整个屏幕,并且随着浏览器屏幕的不同自适应   2如何让登录内容始终居中,这样就是登录内容到屏幕顶端的距离的自适应。

    解决方法:问题1 将背景图片单独切出来,但用作前景图片,并设置

    .beijing {
    position:fixed;
    100%;
    top:0;
    left:0;
    }
    

     然后把登录内容设置为

    position:relative;
    

      问题2 通过JS来动态判断浏览器的高度,设置当下的margin-top

    $(function () {
       
            var zishiying = function (obj) {
    			var WinH = $(window).height();
    	        var WinW = $(window).width();
    	        var winQuotient = WinW / WinH;
    	        var szy_dl_totalH = $(".szy_dl_total").height();
    	        $(".szy_dl_total").css({
    	        	"margin-top" : (WinH - szy_dl_totalH)/2
    	        });
    
                
            }
            $(window).resize(function() {
    			zishiying($(".szy_dl_beijing img"));
            });
            zishiying($(".szy_dl_beijing img"));
    })
    

      

     

          

  • 相关阅读:
    腾讯与唯品会笔试面试经历
    JavaCodeTra 猴子选猴王 约瑟夫循环
    HBase开发错误记录(一):java.net.UnknownHostException: unknown host: master
    fedora
    Qt5.1 静态编译
    Linux/Ubuntu下 静态编译Qt程序
    地铁车型
    交流屏和直流屏的区别
    不间断电源(UPS)
    一级负荷供电
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4691895.html
Copyright © 2011-2022 走看看