亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何根據容器大小設置字體大???

如何根據容器大小設置字體大???

catspeake 2019-08-12 16:46:07
如何根據容器大小設置字體大小?我有一個寬度和高度為%的容器,因此它會根據外部因素進行縮放。我希望容器內的字體相對于容器的大小是一個恒定的大小。有沒有什么好辦法用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; },但我從未聽過這個提議。


查看完整回答
反對 回復 2019-08-12
?
繁華開滿天機

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。我把一個簡單的例子放在一起作為概念證明:

SVG示例

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg></div>


查看完整回答
反對 回復 2019-08-12
  • 3 回答
  • 0 關注
  • 1834 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號