使用css3根据正文宽度设置字体大小答案

【问题标题】：set font-size according to the body width with css3使用css3根据正文宽度设置字体大小
【发布时间】：2014-09-09 04:40:46
【问题描述】：

我想将<body> 的font-size 设置为自身宽度的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);


});

【问题讨论】：

标签： css responsive-design font-size

【解决方案1】：

如果您的<body> 标记具有与视口相同的宽度，您可以使用vw 单位：

vw : 视口宽度的 1/100。( source MDN)

DEMO

body{
    font-size:5vw;
}

如果您的<body> 标记具有百分比宽度，vw 单位也可以工作（考虑到<html> 标记没有固定宽度）。

例子：

body{ 
    width:50%; /* = 100% / 2 */
    font-size:2.5vw; /* = 5vw / 2 */
}

如果您的正文标签具有固定宽度（以 px、em... 为单位），使用 vw 设置的字体大小将无法适应它的宽度。

大众单位的浏览器支持 IE9+，canIuse 了解更多信息。

【讨论】：

这取决于 OP 是否真的要说“视口”而不是“正文”，除非他们有非常具体的理由使字体大小相对于 body 元素而不是视口.我倾向于相信前者，即使 OP 反复特别提到 body 元素。
@BoltClock 我在回答中添加了一些相关信息。