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

Question

I have the following DIVs:

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

Displays this in different screen size:

How can I make the font be responsive, so that the size increases/decreases based on the screen.

Update:

CSS:

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

Answer 1

You can use viewport units, that vary based on the defined container's size (width and/or height)

{
    font-size: 1vmin;
}

Being the possible values:

• vw - relative to viewport's width
• vh - relative to viewport's height
• vmin - relative to viewport's width or height (whichever is the smaller)
• vmax - relative to viewport's width or height (whichever is the larger)

Check out the W3's docs on Viewport Relative Lengths , that states:

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.

Answer 2

You can use media-queries like here:

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