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

心已赠人 2023-08-17 17:20 116阅读 0赞

在制作一个登录界面时遇到了这样一个问题，背景图片是一张大的图片，登录内容设计师设计的比较大，当我把图切出来之后，发现由于我的浏览器屏幕比较小，背景图片出现了滚动条，登录内容在小的屏幕下显得异常的大，这样我们就需要解决两个问题：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

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

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

在制作一个登录界面时遇到了这样一个问题，背景图片是一张大的图片，登录内容设计师设计的比较大，当我把图切出来之后，发现由于我的浏览器屏幕比较小，背景图片出现了滚动条，登录内容在小

心已赠人/ 2023年08月17日 17:20/ 0 赞/ 117 阅读

相关设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下h

系统管理员/ 2023年07月05日 10:25/ 0 赞/ 49 阅读

相关转：关于Iframe自适应高度（解决了我的问题）

原文链接：[https://www.cnblogs.com/apresunday/p/8848119.html][https_www.cnblogs.com_apresunda

悠悠/ 2023年01月11日 01:22/ 0 赞/ 158 阅读

相关自适应网页

[http://www.ruanyifeng.com/blog/2012/05/responsive\_web\_design.html][http_www.ruanyifen

短命女/ 2022年09月21日 13:13/ 0 赞/ 209 阅读

相关自适应网页设计的方法

昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的

偏执的太偏执、/ 2022年08月14日 00:58/ 0 赞/ 220 阅读

相关如何设计自适应网页

现在的网站不仅需要兼容各种浏览器还需要能自适应不同终端，今天总结下常用来设计自适应网页设计的步骤。 > 网页自适应设备 <meta name="viewport"

迷南。/ 2022年07月29日 09:28/ 0 赞/ 190 阅读

相关编写自适应网页——media

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

女爷i/ 2022年06月03日 09:53/ 0 赞/ 259 阅读

相关网页自适应

h5: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>

比眉伴天荒/ 2022年05月19日 11:16/ 0 赞/ 247 阅读

相关关于自适应图片

img上面现在有这两个属性可以使用srcset 和 sizes <img srcset="elva-fairy-320w.jpg 320w, elva

以你之姓@/ 2022年05月01日 12:16/ 0 赞/ 303 阅读

相关自适应网页设计

一、自适应网页设计基础 1. 允许网页宽度自动调整首先，在网页头部加入viewport元标签 <meta name="viewport"

我就是我/ 2022年04月16日 06:42/ 0 赞/ 255 阅读