ulとli要素のテキストをウィンドウサイズに合わせてサイズ変更

Question

私はウェブページを開発しています。私はメインメニューのナビを除いて全てを反応させることができました。

ul要素です。liのテキストがあります。私はせずに収まるようにテキストまたはUL要素を調整したい

：モバイルで

：ここで問題

全Webページについてのいくつかの写真があります別の行。

ここでは、CSS UL要素です：

おかげで...私は多くのことを試みたが、何も動作

.main-menu ul li { 
    display: inline-block; 
    float: left; 
    position: relative; 
    list-style: none; 
} 

：

.main-menu ul { 
    display: table !important; 
    background-color: #98B709; 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

そして李要素皆さんが私を助けてくれることを願っています！

Answer 1

私はあなたの質問に答える必要があり非常に便利なStackOverflowのポストを見つけました：

Responsive Font Size

そして私は、EMにフォントサイズやピクセルから他の問題の部分を変更することが一般的にあまりにもより敏感であることを確認するのに役立ちますことを経験しました。

Answer 2

は、ビューポートここで

Answer 3

の高さの1％に

VHの相対ばらつきであるビューポートの幅の1％に異なるフォントサイズなど

VWの相対を使用してみてください私はいつも避けているdisplay：tableを使わない。

重要なビットは、 'li'要素の '幅'です。あなたが本当に1つの行にそれらをすべてスカッシュしたい場合は、これを非常に小さな％にすることができます。

2行目を使用している場合、 'ul'要素の 'text-align：center'は、現在のように左に浮かぶのではなく、すべてを中央に保ちます。

私はこのコードブロックを常に使用します。それは共通の問題です。

#main{ 
width:100%; 
} 

#main ul { 
display: block; 
text-align: center; 
width: 100%; 
padding: 0; 
margin: 0; 
} 

#main li { 
width:10%; 
list-style: none; 
display: inline-block; 
padding: 0; 
margin: 8px; 
}