4

親要素のサイズが変わるとフォントサイズを変更する方法を考えようとしています。これは、ブラウザのサイズが変更されたことが原因である可能性が最も高いです。たとえば、Chrome を小さくすると、フォントが小さくなり、その逆も同様です。

私はメディアクエリを考えていましたが、それは私がまさに望んでいるものにも合いませんでした. メディアクエリは、使用されているデバイスとすべてを検出するのに優れていますが、それをどのようにしたいかではありません。答えは何らかの JavaScript にあると思っていましたが、CSS を使用する答えがあればそれを好むでしょう。私はいくつかの調査を行いましたが、私が望むものを正確に見つけることができませんでした.

4

5 に答える 5

4

メディアクエリを使用できます。私はこれを私のテストに使用します: 

@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}

選択したサイズが最適ではない可能性があります。遷移は、ウィンドウのサイズ変更中にサイズがジャンプしないようにすることです。

楽しむ ！

于 2013-06-06T02:56:06.453 に答える
2

すべてのプラグインはがらくたです。シンプルなcssを使ってみてください。

例：

@media screen and (min-width: 1200px){
font-size:80%;
}

@media screen and (max-width: 768px){
font-size:90%;
}

@media screen and (max-width: 320px){
font-size:80%;
}

それらは、すべてのビューポートで柔軟になります。これがお役に立てば幸いです。

于 2013-06-06T19:58:02.963 に答える
1

レスポンシブ フォントには CSS3 vh、vw、vminおよび新しい値を使用できます。vmax

ここに画像の説明を入力

1vw = ビューポート幅の 1%

1vh = ビューポートの高さの 1%

1vmin = 1vw または 1vh のいずれか小さい方

1vmax = 1vw または 1vh のいずれか大きい方

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

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

于 2015-12-22T07:26:42.447 に答える
1

http://fittextjs.com/ これはまさにそれを行う素晴らしいプラグインです

于 2013-06-06T02:38:50.267 に答える