calcとvwを使用した2つのフォントサイズ間のリニアスケーリング

Question

calc()とvw単位の組み合わせを2種類のフォントサイズの間で線形に拡大することはできますか？

例：私は次のフォントサイズでのWebページのデザインを与えている：32PX

1024px @：18pxのフォント・サイズである

<h1> 360px @：

<h1>はフォントサイズです単位を使用してfont-sizeをブラウザの幅と共に拡大することを希望する場合、数式はかなりシンプルです（SCSS構文）。

font-size: 18/360*100vw; = font-size: 5vw;

フォントサイズが18px @ 360pxの場合は、5vwとなります。しかし、ブラウザが1024pxになるまでには、<h1>の解像度は、32pxよりもはるかに大きく1024pxになるでしょう。反対の問題は、ベースとして32pxを使用するようにfont-sizeを設定すると発生します。font-size: 32/1024*100vw; = font-size: 3.125vw今度はフォントが@ 360pxと小さすぎます。

2つの異なるブレークポイントで2つのフォントサイズの間でfont-sizeを直線的に拡大することは可能ですか？これを実現するには、何らかの組み合わせ、つまりvw単位とcalcを使用することが可能ですか？私はそのようなことについて方程式を解こうとしましたが、可能かどうかは分かりません。

私のようなものにしようと考えてきました：

これらの線に沿って

font-size: calc(18/360*100vw * 1.01vw);か何かどうやら構文のそのタイプはcalc()のためアクセスできません。

注：単純なメディアクエリソリューションを探しているわけではありません。単純にフォントサイズを@ 1024pxにするだけです。私はすべての解像度間でスムーズにスケーリングする方法を探しています。

Answer 1

をチェックし、JSを使用して試すことができます2点を計算し、結果の方程式を見つける

最初の等式は、360のビューポートに対して、18のフォントサイズです。このように、第2式番目

VWユニットの一部であり、PX B

a * 3.6 + b = 18 

一部

はのはwebmathに行くと

を入力してみましょう

a * 10.24 + b = 32 

です

結果はです

font-size: calc (2.11vw + 10.41px); 

Answer 2

なぜあなたはメディアクエリwhithスケーリングしようとしないでください：

.text { 
    font-size: 5vw; 
} 

@media screen and (min-width: 768px){ 
    .text { 
     font-size: 3.125vw; 
    } 
} 

@media screen and (min-width: 1024px){ 
    .text { 
     font-size: 32px; 
    } 
} 

http://caniuse.com/#feat=calcは、 "既知の問題" タブを確認してください。

またaproximateソリューションが（私は考慮に端数を取っていない）あなたがのために方程式を解くために必要

font-size: calc(2vw + 12px); 

だろう、このリンクhttps://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/