制作字体大小与父div宽度和高度响应css

Question

I'm usign font-size：vw;

#foti_module_wrapper .tools-nav-option i { 
    color: #666666; 
    font-size: 6.2vw; 
} 
#foti_module_wrapper .tool-nav-label { 
    font-size: 3.2vw; 
    line-height: 4px; 
} 
#foti_module_wrapper .tool-item { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
    display: flex; 
    text-align: center; 
} 
#foti_module_wrapper .tools-nav-option { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
    padding: 10px; 
    color: #292929; 
    font-size: 20px; 
    text-align: center; 
    line-height: inherit; 
    cursor: pointer; 
    border: 0; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    z-index: 2; 
    background: white; 
} 

在晴朗的手机作品，但在平板电脑上的字体图标和文本溢出我的工具项填充...

我想避免这种

我想要这个结果：

Answer 1

绝对使用m edia查询来获得想要的结果。

您可以使用这一资源来帮助您的片段，以节省时间：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

祝你好运！

Answer 2

看看这篇文章，也许帮助你。

https://css-tricks.com/viewport-sized-typography/

如果未使用此解决您的问题，请尝试使用media queries。

好运

Answer 3

#foti_module_wrapper .tool-nav-label { 
    font-size: 3.2vw; 
    line-height: 4px; 
} 

您可以使用字体大小：3.0vh，如果你希望它是响应与高度也。 Vw和Vh分别代表宽度和高度。