jQuery 屏幕分辨率高度调整

IT技术 javascript jquery screen resolution margins
2021-02-26 21:43:17

为了更好地平衡我正在处理的页面,我想找到一种方法来根据屏幕分辨率增加 DIV 的上边距。使用 jQuery 或 Javascript 设置这些尺寸的最佳方法是什么?

5个回答

要在 JS 中获取屏幕分辨率,请使用screen对象

screen.height;
screen.width;

根据这些值,您可以计算出适合您的任何保证金。

我只是在学习 Javascript;您是否有机会向我展示计算高度并为其添加特定边距顶部的方法?我正在调整的 div 的 ID 是“port-cont”。
2021-04-26 21:43:17
好吧,你有一个屏幕高度,你必须为浏览器菜单、状态栏等减去一些东西。很难说这会是多少,因为这取决于浏览器。然后你应该为你的元素尝试不同的大小,直到你让网站看起来恰到好处。如果我可以建议我不知道 JS 是否是你正在寻找的。您可以将 CSS 样式表中的高度设置为某个百分比值,该值将始终正确设置,而无需在 JS 中读取屏幕分辨率。
2021-05-04 21:43:17
2021-05-07 21:43:17

这是一个关于如何使用 jQuery 垂直居中对象的示例:

var div= $('#div_SomeDivYouWantToAdjust');
div.css("top", ($(window).height() - div.height())/2  + 'px');

但是您可以轻松地将其更改为您需要的任何内容。

垂直和水平居中 div 或任何对象的另一个示例:

 var obj = $("#divID");
 var halfsc = $(window).height()/2;
 var halfh = $(obj).height() / 2; 

 var halfscrn = screen.width/2;
 var halfobj =$(obj).width() / 2; 

 var goRight =  halfscrn - halfobj ;
 var goBottom = halfsc - halfh;

 $(obj).css({marginLeft: goRight }).css({marginTop: goBottom });

查看 jQuery维度插件

var space = $(window).height();
var diff = space - HEIGHT;
var margin = (diff > 0) ? (space - HEIGHT)/2 : 0;
$('#container').css({'margin-top': margin});