2017-04-20 8 views
0

は、ような何かすることが可能です:私は1回のレム= 16ピクセルを想定したくない異なる単位で以下のcalcを掛ける

font-size: calc(100vw * 0.005rem); 

を。

私が意図しているのは、複数のメディアクエリを使用せずに、ウィンドウの寸法とremに基づいて自動的にフォントサイズをリサイズすることだけです。

たとえば、幅の解像度が1100pxの場合、フォントサイズを1.5remに、400pxを1remに、中央にこのルールの比例サイズを使用するといいとします。私はしたいと思います:

font-size: calc(((100vw - 400px)) * 0.000714rem) + 1rem); 

私はさまざまなアプローチを試みましたが、それを達成できませんでした。

私はそれが単純でなければならないか、それはできないと思います。

+1

あなたがここで何を求めているのかは分かりません。 'body 'の' font-size'のサイズを自動的に 'vw'を使って変更することができます。それはあなたの 'rem'を確立するでしょう。 – Rounin

+0

https://css-tricks.com/viewport-sized-typography/またhttp://maloweb.com/snippets/responsivestuff.html –

+0

私は少し明確にするために私の質問を修正しました。私はクライアントのremを変更したくないので、フォントサイズを取得するためにビューポートの幅と組み合わせて使用​​したいと思います。おそらくそれは意味をなさない... – Leones24

答えて

0

フォントサイズを計算する理由がない場合は、純粋にrem単位に基づいて計算することをお勧めします。携帯電話をポートレートモードからランドスケープモードに切り替えると、ビューポート幅が変わる可能性があることに注意してください。

+0

多分あなたの権利。しかし、私が達成しようとしていることは、すべてのメディアクエリーについて心配することではありません。私の例で書いた数式を使って、フォントサイズを制御することができます。実際には、変更は必要なだけ大きくなる可能性があります。しかし、1行では、フォントのサイズについては心配する必要はありません(少なくともいくつかのケースでは)。私が考える問題は、ユニットですが、最終的にはすべてピクセルです。問題は、Less lessを使用して同じユニットにカバリングする前に、この「ミキシング」ユニットを使用することです。 – Leones24

+0

おそらく、コンパイル時にvw-unitがわからないためです。 – kalsowerus

+0

はい、そうです。ブラウザはCSSファイルでそれを行う必要があります。 Lessの式を逃れることができます。私は尋ねる前にすでにそれを試しましたが、どちらもうまくいきませんでした。 – Leones24

関連する問題