如何在不同的屏幕尺寸用百分比字体

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); 
} 

中显示此不同的屏幕尺寸：

如何使字体响应，以便基于s的大小增加/减少creen。

更新：

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 
} 
}