CSS変数とcalc()を使ったレスポンシブデザイン – browser-land

CSS変数とcalc()を使ったレスポンシブデザイン

 :root 疑似クラスを使ったCSS 変数の宣言

表示する画面サイズに最適なデザインを提供する為に、CSS変数を使います。
CSS変数は :root 疑似クラスを使う事でグローバル変数としています。
サンプルでは0から100の数字を変数として扱い、後にデザイン別に倍率を掛けて全体の大きさを調整します。

:root {
 –0:0;
 –1:1;
 –2:2;
 –3:3;
 –4:4;
 ・
 ・
 ・
 –100:100;
}

 calc() によるCSS変数への単位付与

CSS変数は数値のみを宣言しているため、単位がありません。
数値と単位の結合はcalc()を使って行います。
サンプルではメディアクエリを使う事で縦長画面と横長画面で処理を分岐しています。

@media screen and (max-width:128vh) {
 .cssSize_Menu {
  width:calc(var(–4)*1vw);
  height:calc(var(–4)*1vw);
 }
}
@media screen and (min-width: 129vh) {
 .cssSize_Menu {
  width:calc(var(–4)*1vh);
  height:calc(var(–4)*1vh);
 }
}

 JavaScriptでCSS変数を書き換える

CSS変数をJavaScript書き換える事で、変数の値が可能出来ます。
メディアクエリと組み合わせる事で複雑な表現も可能になります。
サンプルでは 変数a の値を変更する事で倍率を変更しています。

document.documentElement.style.setProperty(“–4”, 4 * a);
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード