How to use percentage for font in different screen size

问题:

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

回答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.

回答2:

You can use media-queries like here:

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

文章来源: How to use percentage for font in different screen size