如何设置中的字体大小随 height变化而自适应外联的CSS怎么写

发布网友发布时间：2022-05-10 18:33

共5个回答

热心网友时间：2023-10-22 01:13

一般需要用到JQuery来控制pre的文字字体大小：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="

<script type="text/javascript">
$(function(){
var domH = $('.msg').height();
//外框的高度
var fsize = domH/3;
//要改变的文字尺寸
$('.donH').html('外框高度为：'+domH+'px'+'，'+'文字大小为：'+fsize+'px');
$('.word').css('font-size',fsize);//改变文字的size
})

</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.demo{
margin: 0 0 0 100px;
}
.msg {
width: 300px;
text-align: center;
box-sizing: border-box;
border: 1px solid #000000;
}
</style>

<body>
<div class="demo">
<div class="donH">

</div>
<div class="msg">
示例文字<br> 随外框高度改变的文字：
<strong class="word" style="color: red;">9999元</strong>
</div>
</div>
</body>

</html>

热心网友时间：2023-10-22 01:13

字体自适应放大css是弄不出来的。
只有勉强用js判断父级大小，当父大于xxx时，font-size:12px;当大于xxxx时font-size:14px;追问有专业人士帮我解决了，不过谢谢
他用的也是js

追答只有用js。其实我也觉得css很有必要能支持让字体按父级宽度的比例自动缩放的功能

热心网友时间：2023-10-22 01:14

那你外层的div高度是谁控制的？
html基本原理是内部元素撑大外部元素

如果你要用纯css来实现，可以试试所有高度宽度都用em来控制，最后通过改变 fontsize的px值就可以改掉所有用em的地方的大小追问对哦，试试

热心网友时间：2023-10-22 01:14

<div class="div_font">
<pre class="pre_font"></pre>
</div>
//设置div字体

.div_font{
font-size:18px;

}
//设置div下的pre字体

.div_font>.pre_font{
font-size:0.5em;//使用em相对单位
}

热心网友时间：2023-10-22 01:15

你是说，你的div放大到500px高度时，里面的两个pre也自动放大？追问嗯，字体随div的高度变化
div高度变大，字体也变大

如何设置中的字体大小随 height变化而自适应 外联的CSS怎么写

如何设置中的字体大小随 height变化而自适应外联的CSS怎么写