1

有没有办法根据容器大小使用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);
}

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

4

2 回答 2

2

查看 CSS3 单元vw。

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

于 2012-11-30T00:10:50.983 回答
1

这在 CSS 中是不可能的，和/或很多浏览器都不支持。你可以看看viewport-relative-lengths但它不会在任何地方工作......

对于扑通的效果，您可以使用诸如与背景颜色相同的内容或透明度之类的东西。演示

​$(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/

于 2012-11-30T00:37:33.550 回答