如何根據容器大小設置字體大小？我有一個寬度和高度為％的容器，因此它會根據外部因素進行縮放。我希望容器內的字體相對于容器的大小是一個恒定的大小。有沒有什么好辦法用CSS做到這一點？在font-size: x%只將根據原來的字體尺寸（這將是100％）縮放的字體。
3 回答
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
如果要將font-size設置為視口寬度的百分比，請使用vw單位：
#mydiv { font-size: 5vw; }另一種方法是使用嵌入在HTML中的SVG。它只是幾行。text元素的font-size屬性將被解釋為“user units”，例如視口的定義。因此，如果將視口定義為0 0 100 100，則字體大小為1將是svg元素大小的百分之一。
不，沒有辦法在CSS中使用計算來做到這一點。問題是用于font-size的百分比（包括計算中的百分比）是根據繼承的字體大小而不是容器的大小來解釋的。CSS可以使用一個叫做bw（box-width）的單元來實現這個目的，所以你可以說div { font-size: 5bw; }，但我從未聽過這個提議。
繁華開滿天機
TA貢獻1816條經驗 獲得超4個贊
另一個js替代方案：
fontsize = function () {
var fontSize = $("#container").width() * 0.10; // 10% of container width
$("#container h1").css('font-size', fontSize);};$(window).resize(fontsize);$(document).ready(fontsize);或者如torazaburo所說，你可以使用svg。我把一個簡單的例子放在一起作為概念證明：
<div id="container"> <svg width="100%" height="100%" viewBox="0 0 13 15"> <text x="0" y="13">X</text> </svg></div>