html - 如何在不同屏幕尺寸下对字体使用百分比

Question

我有以下 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;
    }
}

Answer 1

您可以使用根据定义的容器大小(宽度和/或高度)而变化的视口(viewport)单位

{
    font-size: 1vmin;
}

作为可能的值:

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

查看 W3's docs on Viewport Relative Lengths ，即:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.