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

Posted

技术标签:

【中文标题】使用css3根据正文宽度设置字体大小【英文标题】:set font-size according to the body width with 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);


);

【问题讨论】:

【参考方案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 我在回答中添加了一些相关信息。

以上是关于使用css3根据正文宽度设置字体大小的主要内容,如果未能解决你的问题,请参考以下文章

JS根据设备宽度设置根节点(html)font-size字体大小

如何根据容器大小设置字体大小? [复制]

为啥即使我没有明确设置表格字体大小,表格也不使用正文字体大小?

根据容器宽度动态调整文本大小

如何根据WatchKit中的手表大小缩放字体大小?

TextView系列:给定宽度,根据内容长度,自动改变字体大小