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

问题描述

我有以下DIV：

 < div class =tckLeftHolder> 
< div class =tckLeftContents> 
< span>急诊等待< / span> 
< / div> 
< / div> 
  

CSS：

  .tckLeftContents 
 {
 text-align：center; 
宽度：90％; 
填充：0 0 0 10％; 
 height：35px; 
 overflow：hidden; 
} 
 .tckLeftHolder 
 {
 float：left; 
宽度：25％; 
 height：35px; 
 line-height：17px; 
 vertical-align：middle; 
背景：＃EA7C30; 
 border-top-left-radius：10px; 
 border-bottom-left-radius：10px; 
颜色：#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; 
 
 
 
 $ div $解析方案

你可以使用视口单元，它根据定义的容器的大小（宽度和/或高度）而变化

  {
字体 - 大小：1vmin; 
} 
  

成为可能的值：



• vw - 相对于视口宽度


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

查看 W3关于视口相对长度的文档 ，表示：

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

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

解决方案

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.

这篇关于如何在不同屏幕尺寸下使用百分比字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！