スマホメニュー

メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】

レスポンシブサイトを作る時に一番面倒なのが、ビューポイントに合わせてメディアクエリを使い、細かく指定することだと思います。
その指定の中で今回は、フォントサイズをレスポンシブに対応してみます。

フォントサイズの指定で代表的な方法はvwを使うことですが、これだけだと正直使いづらいと感じています。
使用率はどんなものでしょうか?スマホだけに使ったり部分的に使うのはたまに見ますが…

そこで、calcと組み合わせて、vwを使いやすくしようと思います。

Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】

パララックスと言うか、ページをスクロールして、画面内に要素が現れたら要素を移動・変化させるプラグインは数あれど、使い方が良くわからなかったり何かと面倒です。
なので、classをつけるだけで動くライブラリを作って見ました。

スマホの検索バーの表示・非表示でもリサイズ判定されるので対処してみた。

Javascriptで動きをつけている時、ウィンドウのリサイズで動きをリセットしたい時もあるかと思います。
例えば、BREAK PANELもブラウザのサイズを変更すると、それに合わせてゲーム画面も変更するようにしています。

しかし、ただ単にリサイズされた時という判定をしているとスマホ等で予期せぬ動きをしてしまいます。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2024年10月
« 10月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

タグ

Social