关于设置网页自适应不同浏览器的问题解决

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

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

.beijing {
position:fixed;
width: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"));
})

　　

　

　　　　　　

 

转载于:https://www.cnblogs.com/s-z-y/p/4691895.html