怎样用scale放大缩小文本还能自适应容器？

Question

<meta charset="UTF-8">
<title>scale</title>
<style>
    .scale {
        display:inline-block;
        transform:scale(3);
        border: 1px solid #0f0;
    }
    .div11 {
        width: 150px;
        height: 150px;
        border: red solid 1px;
        margin-left: 100px;
        margin-top: 100px;
    }
</style>

<div class="div11">
    <span class="scale">A</span>
    <span>A</span> 
</div>

放大后该有的效果

Answer 1

那你这应该改fontsize比较合理

Answer 2

transform 不会影响元素布局的。可以：

1. zoom: 3
2. 直接设置 font-size: 36px