CSS，相对字体大小

是否可以将字体大小设置为容器大小的百分比？我有一个包含图像，标题和描述的项目列表。随着用户调整窗口大小，图像会自动调整大小。我希望标题字体也能做到这一点。CSS，相对字体大小

编辑：Javascript/JQuery很好。

来源

2012-07-16 Scott Beeson

容器大小，你的意思是包括填充，包括填充和边框，或包括填充，边框和边距？ – 2012-07-16 20:58:47

此外，国际海事组织，我不鼓励你调整基于视口/窗口大小的字体大小。它主要防止可读性。 – 2012-07-16 21:21:15

容器，窗口，填充，不管。我只是希望它能够相对于其他任何改变时自动调整大小，当窗口，因此布局，调整... – 2012-07-16 21:54:25

只是对泰勒的回答扩大，这就是JavaScript是意味着，虽然我点点肯定，你可以使用CSS3视口达到同样的壮举，你将使用jQuery更好（这是通常在大多数浏览器的缓存和总是托管在谷歌所以没有必要担心:)

如果你有一个这样的CSS：

#body #mytext { 
    font-size: 50%; 
}

可以动态调整jQuery中是这样的：

$(window).resize(function(){ 
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); 
});

来源

2012-07-16 21:16:06

只是一个参考，你不必指定'＃mytext'是'＃body'的后代，除非你试图增加特殊值（如果你使用的是id，那么这很坦率地说是错误的方法）。 – 2012-07-16 21:28:33

这取决于场景，以这种方式使用CSS没有任何问题。虽然，它只是一个演示... – 2012-07-16 21:37:25

错误的语法，没有。错误的语义，是的。 – 2012-07-16 21:38:45

不，这只能用JavaScript来完成。

来源

2012-07-16 20:34:32

正如泰勒说，字体计算相对于当前设置字体大小的浏览器，如果您使用动态字体大小，如“em”或“％”值。如果要根据标签的高度/宽度获得大小，您必须使用javascript计算字体大小 – r3bel 2012-07-16 20:36:43

-1

我已经完成了jquery的过去。看看这篇文章，如果它是你的任何利益。您还可以使用CSS来检测设备宽度（而不是浏览器，并且它在旧版浏览器中不受支持）。

http://css-tricks.com/resolution-specific-stylesheets/

来源

2012-07-16 20:48:48 TurboSupra

是jQuery是一个选择吗？如果是

超级简单：fiddle

<div id="container"> 
    <p>HELLO WORLD!</p> 
</div> 


<script> 
$(document).ready(function() { 
    var sizeMe = ($('#container').height()/100) * 90; /* 90% of container */ 
    $('p').css('font-size', sizeMe); 
}; 
</script>

来源

2012-07-16 20:54:11 Turnip

理论上还需要更改许多其他属性（即文本缩进，行高等）。 – 2012-07-16 21:06:03

但是，OP再一次没有询问这个问题。 :) – 2012-07-16 21:25:54

这不适用于我，即使在jsfiddle。？ – 2012-07-16 21:52:58

在CSS3，有vw单元，它代表视口宽度的1/100。例如，

h1 { font-size: 5.5vw; }

将标题字体大小设置为视口宽度的5.5％。

但是，这似乎只适用于IE 9（标准模式）到目前为止。此外，只有在重新加载浏览器窗口时，IE 9才会动态更改单位的值。

来源

2012-07-16 21:16:10

虽然这不是相对容器的大小。 – 2012-07-16 21:25:37

这给出了相同的效果，但容器大小的任何变化无论是通过JavaScript还是通过更改CSS，这都无法正常工作。人们必须记住在更改容器的大小时更新它。 – 2012-07-16 21:37:38

CSS，相对字体大小

回答

相关问题