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

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

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

enter image description here

如何使字體響應，以便基於s的大小增加/減少creen。

更新：

enter image description here

CSS：

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

來源

2014-10-07 SearchForKnowledge

您可以使用視單位，即變化基於定義的容器的尺寸（寬度和/或高度）

{ 
    font-size: 1vmin; 
}

作爲可能的值：

VW - 相對於視口的寬度
VH - 相對於視口的高度
VMIN - 相對於視口的寬度或高度（以較小者爲準）
VMAX - 相對於視口的寬度或高度（取大）

檢查出W3's docs on Viewport Relative Lengths，宣稱：

視口百分比長度相對於初始的含有大小塊。當初始包含塊的高度或寬度發生變化時，會相應地縮放。

來源

2014-10-07 15:59:55 LcSalazar

我更新了我的問題，我看到... – SearchForKnowledge 2014-10-07 16:05:00

它變得soooooo微小。我想知道爲什麼：/ – SearchForKnowledge 2014-10-07 16:09:19

增加價值，這是一個百分比...像「3vmin」或「10vmin」。即使十進制值'5.85vmin' – LcSalazar 2014-10-07 16:13:49

您可以使用media-queries喜歡這裏：

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

來源

2014-10-07 15:54:05

我想這是唯一的方法...即使在字體大小增加/減少之後，如何垂直居中呢？ – SearchForKnowledge 2014-10-07 15:57:25

文本對齊：中心通常做的工作 – robjez 2014-10-07 16:04:02

垂直:)你寫的是水平的 – SearchForKnowledge 2014-10-07 16:06:03

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

回答

相關問題