当窗口调整大小时,我的文本保持居中并平滑地调整大小时遇到了一些问题。
我有一个显示温度的天气网站,只显示温度。我以几种方式显示温度。如果他们之前访问过,我会将临时存储在本地存储中并显示它,直到我可以用我的 php 函数解析它。所以一切似乎都正常,除非我调整页面大小时。
我正在使用 jQuery 使文本居中。
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
这是根据页面视口(viewport)调整文本大小的 css。
font-family:BebasNeueRegular;
src:url(BebasNeue-webfont.eot?#iefix) format(embedded-opentype), url(BebasNeue-webfont.ttf) format(truetype), url(BebasNeue-webfont.svg#BebasNeueRegular) format(svg);
font-weight:500;
font-style:normal;
font-size:45vw;
position:relative;
如有任何提示,我们将不胜感激。
谢谢
最佳答案
这应该可以解决问题!
window.onresize = resize;
function resize(){
$("#fn").css("top", ( $(window).height() - $("#fn").height() ) / 2+$(window).scrollTop() + "px");
$("#fn").css("left", ( $(window).width() - $("#fn").width() ) / 2+$(window).scrollLeft() + "px");
}
关于javascript - 使用 Javascript 将文本居中并使用 css3 viewport 调整大小在调整大小时会很不稳定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20821524/