親divの幅と高さに応じてフォントサイズを変更する

Question

私は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はそれぞれ幅および高さに対応する。