设置不同的宽度和高度字体在css/js

我正在寻找一种方法来分别设置不同的宽度和高度基于视口的宽度和高度。是否可以在CSS或JS？设置不同的宽度和高度字体在css/js

来源

2014-12-20 Luke

这在js中当然是可行的，但它取决于你需要的确切内容，以确定它是否可以在CSS中完成。你能对你的问题更具体吗？请向我们展示代码示例。 – radiovisual

我试图实现一个文本，将保持在相同的比例文本是在div。不工作的例子在这里：http://jsfiddle.net/s3wabLkL/1/ – Luke

看看http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Musa

对于JS解决方案，您可以使用FlowType.js库。

它将允许您快速轻松地控制页面上的文本元素相对于其包含div的大小。

你的例子是设置这样的：

$(document).ready(function(){ 

    // customize the options you pass into the 
    // flowtype function in order to get the effects you want 
    $('.text_block').flowtype({ 
    minimum : 500, 
    maximum : 1200, 
    minFont : 12, 
    maxFont : 40, 
    fontRatio : 30 
    }); 

});

此示例使用jQuery来确保在页面加载后，通过流动型的全部任务只分配。

要激活流动型，你只需要您的交易<body>标签在什么地方把这个电话：

<script> $('.text_block').flowtype(); </script>

有关如何安装流动型，以及如何配置它的更多信息，请参见flowtype.js website。

Here is a jsfiddle显示您的示例与flowtype库分配。

希望这会有所帮助！

来源

2014-12-20 17:16:36 radiovisual

您可以自定义使用流动式配置来获得你要找的效果 – radiovisual

我的不好，它运作良好谢谢先生，这就是我要找的 – Luke

很高兴听到它！快乐编码！=） – radiovisual

设置不同的宽度和高度字体在css/js

回答

对于JS解决方案，您可以使用FlowType.js库。

Here is a jsfiddle显示您的示例与flowtype库分配。

相关问题