我想设置 font-size
的 <body>
为自身宽度的 5%(body
)。
是否有纯 css3 方法来做到这一点?
我现在正在用 jquery 做这个,但我希望它更简单:
$(function() {
var $body = $('body');
function adjust_font_size() {
$body.css('font-size', $body.width()*0.05+'px');
}
adjust_font_size();
$(window).resize(adjust_font_size);
});
最佳答案
如果您的 <body>
标签具有与视口(viewport)相同的宽度,您可以使用vw
单位:
vw : 1/100th of the width of the viewport.( source MDN)
body{
font-size:5vw;
}
如果您的 <body>
标签有一个百分比宽度,vw
单位也可以使用(考虑到 <html>
标签没有固定宽度)。
示例:
body{
width:50%; /* = 100% / 2 */
font-size:2.5vw; /* = 5vw / 2 */
}
如果您的 body 标签具有固定宽度(以 px、em... 为单位),则字体大小设置为 vw
不会适应它的宽度。
vw 单位的浏览器支持是 IE9+,canIuse了解更多信息。
关于css - 使用 css3 根据主体宽度设置字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24818282/