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

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

您可以使用视口单位，这些单位根据定义的容器大小（宽度和/或高度）而变化

{
    font-size: 1vmin;
}

成为可能的价值观：

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

查看W3's docs on Viewport Relative Lengths，其中说明：

  

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

Answer 2

您可以像{}一样使用media-queries：

@media (max-width: 699px){
  .tckLeftHolder
{
    font-size: 8px; //or how much pixels you want
}
}