フォントサイズの基礎を「コード1」のようにしています。
ただし、個々のブロックにおいては基礎になる値に対しての比率で設定したいと考えています。
例えば、基礎の値より20%大きくしたい場合、「font-size:calc(基礎の値(rem) * 1.2);」 のような感じで
設定したいのですが、実際には不可能です。
そこで代案として、「font-size: 1.2em;」なら上手く行きそうですが、論理的に合ってますでしょうか?
継承による複利計算の副作用は無視するものとします。
「コード1」 /* 【フォントサイズ】 ここから↓ */ /* 1(px) : .1(rem) : .093(vw) */ /* 1(rem) : .926(vw) : 10(px) */ /* 1(vw) : 10.8(px) : 1.08(rem) */ /* 1rem : 10px : .926vw */ :root { font-size : 62.5%; } /* メディアクエリを用いたフォントサイズの設定。 スマートフォン向けの設定 320px未満 */ @media not all and (min-width : 320px) { body { font-size : 1.4rem; } } /* タブレット・パソコン向けの設定 320px以上、かつ、960px未満 ブラウザによる不具合が生じる場合は「font-size : 1.6rem」とする。 */ @media (min-width : 320px) { @media not all and (min-width : 960px) { body { /* font-size:calc(((1.8rem - 1.4rem) / (96rem - 32rem)) * (100vw - 3.2rem) + 1.4rem); */ font-size : calc(.00625 * (100vw - 3.2rem) + 1.4rem); } } } /* パソコン向けの設定 960px以上 */ @media (min-width : 960px) { body { font-size : 1.8rem; } } /* 【フォントサイズ】 ここまで↑ */```ここに言語を入力
何ができていて、何が不可能なのでしょうか。「「font-size:calc(基礎の値(rem) * 1.2);」 のような感じで
設定したいのですが、実際には不可能です」とありますが、font-size:calc(1.8rem * 1.2);は可能です。
「320px以上、かつ、960px未満」の場合はすでにcalc関数でフォントサイズが算出されているので、
その値に対して小数で乗算するのは不可能です。
【追記】
基礎の値に対して相対値で設定したいです。
kei344様、返信ありがとうございます。
上書きになってしまうremは使いたくありません。
> calc関数でフォントサイズが算出されているので、その値に対して小数で乗算するのは不可能です
試したコードを追記してください。
> 上書きになってしまうrem
何が何に対して上書きになる、と思っているのかが正直わかりません。
(質問文は編集できます)何と何を計算してどんな数値を出したいのかを明確にして、その上で試したコードを提示することをお勧めします。
また、この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。
kei344様
質問を上手く記述出来ませんでした。
今後は自分なりに試行錯誤して行きます。
あなたの回答
tips
プレビュー