如何在不同屏幕尺寸下使用百分比字体(How to use percentage for font in different screen size)

如何在不同屏幕尺寸下使用百分比字体(How to use percentage for font in different screen size)

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

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

最满意答案

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

{ font-size: 1vmin; }

作为可能的价值观：

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

查看关于视口相对长度的W3文档 ，其中指出：

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

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.