@mediaクエリやjavascriptを使用しない、より小さい画面上の大きなフォント？

Question

画面サイズに反比例してfont-sizeを達成するための@mediaクエリの代替手段はありますか？ （例えば、小さな画面ではフォントが小さくなる2vwの反対の効果）。

私の最初の試みは、ビューポートの幅の増分で値を分割していましたが、が動作し、残念なことに、font-size: calc(100/2vw);は機能しません。定義により

codepen of my first try

Answer 1

あなたは、ビューポート幅の増加によりpx値を分割することはできませんが、ビューポート幅の増加によりpx値を減らすこの逆のサイズの挙動を達成することができます。

例：vhvminとvmax：
font-size: calc(40px - 2vw);

Codepen DEMO

代わりに、ビューポートのサイズに関連した他の3台を使用することができます。

例：
font-size: calc(40px - 2vh);
font-size: calc(200px - 20vmin);
font-size: calc(200px - 20vmax);

VW - ビューポートの幅の1％と比較*。
vh - ビューポートの高さの1％に相当*。
vmin - ビューポートの*小さい方の寸法の1％に相対します。
vmax - ビューポートの*より大きい次元の1％に相対します。

*ビューポート =ブラウザのウィンドウサイズ。

出典：w3schools

Answer 2

、VWは、ビューポートの幅の1/100です。それでおしまい。 2vw =画面の2/100です。数学はそのようには機能しないので、反比例するような方法はありません。私は思考実験としてこれをやっていると仮定しています。あなたのコードの問題を解決しようとするよりも、私はそれを残しておきます。

JavaScriptのサイズに反比例するフォントのサイズを計算することができます。 Here's a codepen

HTML：

<div > 
    This is text 
</div> 

JS：

$(window).resize(function() { 
    area = 50000; 
    width = $(window).width(); 
    fontSize= (Math.ceil(area/width)); 
    $('div').css('font-size', fontSize); 
    }).resize(); 

Answer 3

私はあなたが行うことができる最高のビューポートに相対ではないフォントサイズを使用することであると思います。たとえば、1emはモバイルデバイスでは比較的大きく、デスクトップクライアントでは比較的小さくなります。流体レイアウトを使用する場合、emは完璧です。静的レイアウトを使用する場合、最適なオプションはおそらくpxになります。しかし、pxを使用するのは、モバイルデバイスが潜在的にデスクトップクライアントと同じくらい多くのピクセルを持つ可能性があるため、ちょっとしたことです。

5vw

前者評価さと距離の表現ではない50/vw後者評価するからであるcalc(100/2vw)ないcalc(10vw/2)動作することが、理由。より正確には、エンジンはスカラーでしか分割できません

合計で、やりたいことをするには流体レイアウトがあり、フォントサイズの単位としてemを使用する必要があります。しかし、JavaScriptなしでビューポートのサイズの直接の比率を得ることはできません。もちろん、レイアウトの目的には一般的に頼らないといけません。この1つはパフォーマンスは非常に少ないと一度だけリサイズあたり1つののみの要素、体のために実行する必要が影響を与えるのにここ

Answer 4

は、スクリプトソリューション（あなたが望んでいた場合でも、見つかった、唯一のCSS）です。

これはCSSに比べて1つの利点があります。最小/最大サイズを持つことができ、スクリプトを有効にしてリスクのない方法でプログレッシブエンハンスメントとして機能します。

var fontMax = 40, fontMin = 14; 
 

 
function sizeBodyFont() { 
 
    var fontSize = ((screen.width/window.innerWidth) * 10); 
 
    document.body.style.fontSize = Math.min(Math.max(fontSize,fontMin),fontMax) + 'px'; 
 
} 
 

 
sizeBodyFont(); 
 

 
(function(el) { 
 
    window.addEventListener('resize', sizeBodyFont); 
 
}(document.querySelector('#test')))

body { 
 
    font-size: 20px; 
 
} 
 
span { 
 
    font-size: 100%; 
 
} 
 
div { 
 
    font-size: 150%; 
 
}

<span>Hey there</span> 
 
<div>Hey there</div>

Answer 5

あなたは相対的なフォントスタイルを使用することができます。 like -

html, body { 
font-size: 16px; 
} 

h1 { 
font-size: 2.5em; 
} 

p { 
font-size: 1em; 
}