Question

我有一个响应的div但是文本内容没有响应，它没有随着宽度的变化而减少。

HTML

<div class="circle">Hello I want to resize.</div>

CSS

.circle
    {
    width:100%;
    height:100%;
    border-radius:250px;
    font-size:200%;
    color:#fff;
    text-align:center;
    background:#000
    }

Demo

Answer 1

您可以使用视口值而不是ems，pxs或pts。

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

试试font-size:7vw;。

.circle
{
width:100%;
height:100%;
border-radius:250px;
font-size:7vw; //changed this
color:#fff;
text-align:center;
background:#000
}

<强> Demo here

如何在调整大小时响应字体文字？

1 个答案: