我一直在尝试(徒劳)构建一个页面,当我更改窗口大小时,其元素会调整大小。我有它在css工作的图像没有问题,但我似乎无法完成相同的文本,我不确定它甚至可能在CSS中。我似乎无法找到一个完成此任务的jquery脚本。
当用户调整窗口大小时,我基本上希望页面能够动态且流畅地扩展,而无需用户调用页面缩放。这可以通过css在我的img divs上正常工作,但不能保留相同大小的文本。
有什么想法吗?
答案 0 :(得分:34)
我必须自己做。我所做的是我为身体设置了基本文本大小,并为所有其他大小设置了百分比。然后我使用一个简单的jQuery脚本来改变窗口大小调整的基本大小。其他尺寸也会更新。
我使用过这样的东西:
$(function() {
$(window).bind('resize', function()
{
resizeMe();
}).trigger('resize');
});
在resizeMe函数中,我有这个:
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;
var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
答案 1 :(得分:12)
答案 2 :(得分:7)
您可以使用CSS3 media queries执行此操作,根据浏览器大小指定不同的基本字体大小。在A List Apart
上有一篇很好的文章对于IE支持,您可以使用CSS expressions
来破解它这要求您使用固定的基本字体大小,例如body
标记,以及其他地方的百分比或em
大小。
答案 3 :(得分:4)
以Lizzan的答案为基础,这是一个使用宽度和高度的平方根来获得比例尺寸的版本:
// When document has finished loading
$(document).ready(function() {
var resizeText = function () {
// Standard height, for which the body font size is correct
var preferredFontSize = 180; // %
var preferredSize = 1024 * 768;
var currentSize = $(window).width() * $(window).height();
var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
var newFontSize = preferredFontSize * scalePercentage;
$("body").css("font-size", newFontSize + '%');
};
$(window).bind('resize', function() {
resizeText();
}).trigger('resize');
});
答案 4 :(得分:3)
我正在使用来自http://practicaltypography.com/end-credits.html#bio M. Butterick的技巧:
<style type="text/css">
<!--adattamento font-size a browser width-->
@media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
body {
max-width:1000px;
min-width:520px;
line-height:1.33em;
margin:1em;
background-color:#f7f7f7;
font-family:Source Sans Pro;
color:#361800;
}
</style>
答案 5 :(得分:3)
媒体查询是(其中一个)答案。
这里的技巧是从body开始使用%到字体大小。这样,字体大小就会被继承,当你在体内更改它时,它会随处变化。
尝试类似:
body { font-size: 100% }
h1 {font-size: 200% }
@media all and (max-width:600px) {
body {font-size: 70%}
}
当网站宽度小于600px时,字体大小将变为所有位置的70%,其中使用%(在此示例中也是h1。)
答案 6 :(得分:0)
Lizzans的答案是完美的!保留-1所在的位置!当我把它移走时,小猫们到处乱窜。
只需将其设置为页面的标准fontsize,而不是fontsize变量。我16岁。
答案 7 :(得分:0)
您可以使resizible文本更简单。这个解决方案适合我。 http://jsfiddle.net/VooDi/dka48dx8/
对于body set font-size,相当于当前窗口的内部宽度;
表示jsfiddle 560 px;
body {
font-size: 560px;
}
JS:
onresize=onload=function() {
document.body.style.fontSize=window.innerWidth+"px"
}
以及所需的元素集字体大小(百分比)
<h1 style="font-size:5%">Resize this text!!!!</h1>
多数民众赞成。希望这有助于某人。
答案 8 :(得分:0)
检查一下:https://jsfiddle.net/bheng/dp5jh7nu/
["is","sunny","the","day"]