Question

有没有办法根据 CSS 的容器大小动态设置字体大小？此刻我正在使用以下JS代码来实现此行为：

var cubeText = function() {
    var fontSize = parseInt($(".cube.avatar").width());
    fontSizeBig = fontSize/3.5
    fontSizeSmall = fontSize/6;
    console.log(fontSize);
    $(".cube span.big").css('font-size', fontSizeBig);
    $(".cube span.small").css('font-size', fontSizeSmall);
}

这有一个很大的缺点：测试弹出页面加载后调整大小，这会产生非常令人不愉快的“倾斜”效果。

Answer 1

查看CSS3单元vw。

如果您需要支持其他浏览器，JavaScript是唯一的方法。

Answer 2

在CSS中不可能，和/或许多浏览器都不支持。您可以查看viewport-relative-lengths，但它无处不在......

对于ploping效果，您可以使用类似于背景颜色的内容，例如背景或透明度。 Demo

$(document).ready(function(){
   changeFontSize();
    });

function changeFontSize(){
    var fontSize = parseInt($(".cube").width());
    var fontSizeBig = fontSize/10;
    var fontSizeSmall = fontSize/20;
    console.log(fontSize);
    $(".big").css('font-size', fontSizeBig);
    $(".small").css('font-size', fontSizeSmall);
    $(".cube").css('color','#000');
}

你也可以使用像这样的漂亮的js插件：http://fittextjs.com/

通过CSS3根据容器大小设置字体大小

2 个答案: