html - 如何在不同屏幕大小的字体中使用百分比

我有以下 DIV:

<div class="tckLeftHolder">
    <div class="tckLeftContents">
        <span>URGENT CARE WAIT</span>
    </div>
</div>

CSS:

.tckLeftContents
{
    text-align: center;
    width: 90%;
    padding: 0 0 0 10%;
    height: 35px;
    overflow: hidden;
}
.tckLeftHolder
{
    float: left;
    width: 25%;
    height: 35px;
    line-height: 17px;
    vertical-align: middle;
    background: #EA7C30;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}

以不同的屏幕尺寸显示:

如何使字体具有响应性，以便大小根据屏幕增加/减少。

更新:

CSS:

@media (min-width: 500px) and (max-width: 860px)
{
    .tckLeftContents
    {
        font-size: 1vmin;
    }
}

最佳答案

您可以使用视口(viewport)单位，该单位因定义的容器大小(宽度和/或高度)而异

{
    font-size: 1vmin;
}

作为可能的值:

vw - 相对于视口(viewport)的宽度

vh - 相对于视口(viewport)的高度

vmin - 相对于视口(viewport)的宽度或高度(以较小者为准)

vmax - 相对于视口(viewport)的宽度或高度(以较大者为准)

查看 W3's docs on Viewport Relative Lengths ，其中指出:

关于html - 如何在不同屏幕大小的字体中使用百分比，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26240138/