CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。 基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
CSS メディアクエリのブレイクポイントに CSS 変数は使えない - かもメモ
タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { color: #F00; } } これは動作しない。 (window が 48em 以上になっても color: #F00; にはならない) This may seem confusing at first. If our variables are available at the :root of the page, why can't a media query access them? Well, it comes down to what th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
