是否可以将字体大小设置为容器大小的百分比?我有一个项目列表,其中包括图像、标题和描述。当用户调整窗口大小时,图像会自动调整大小。我希望标题字体也能做到同样。
编辑:使用JavaScript / JQuery也可以。
是否可以将字体大小设置为容器大小的百分比?我有一个项目列表,其中包括图像、标题和描述。当用户调整窗口大小时,图像会自动调整大小。我希望标题字体也能做到同样。
编辑:使用JavaScript / JQuery也可以。
CSS3中有一个vw
单位,代表视窗宽度的1/100。例如:
h1 { font-size: 5.5vw; }
将标题字体大小设置为视口宽度的5.5%。
然而,这似乎只在IE 9(标准模式)上有效。此外,当浏览器窗口被调整大小时,IE 9不会动态更改单位的值,只有在重新加载页面时才会更改。
仅仅是对Tyler的回答进行扩展,JavaScript就是为此而生存在的,尽管我有点确定你可以使用CSS3视区来实现同样的功能,但最好还是使用jQuery(它通常在大多数浏览器的缓存中,并且始终由Google托管,所以不用担心:)
如果你有这样一段CSS:
#body #mytext {
font-size: 50%;
}
您可以像这样在jQuery中动态调整大小:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
#mytext
是#body
的后代。 - Tyler Cromptonid
属性中的值必须是唯一的。因此,#mytext
最多只能引用一个元素。话虽如此,在CSS规则中指定其任何祖先元素并没有太大必要。 - Tyler CromptonjQuery 是一个选项吗?
如果是的话,非常容易: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>
我以前用过jquery做过这个。如果你感兴趣,可以看看这篇文章。你也可以使用CSS来检测设备宽度(不是浏览器,而且在旧版浏览器中不支持)。