縮小したら文字が大きく
スクリーンサイズに応じたフォントサイズの変更はかなり読みやすくなるアイディアだと思っていて、ここでもずいぶん前から使っている。が、ブラウザーのズームと相性が非常に悪く、縮小したつもりが文字サイズが大きくなったみたいなことがよく起こる。このウェブサイトでもネタ元のウェブサイトでも起こる。 最初はMedia Queriesのブレークポイントでem単位を使うとおかしくなるのかと思ってて、その気になればすぐ直せると思ってたけど全然違った。ズーム機能によって閲覧領域自体が仮想的に変化するということが原因だった。 以下の様な簡単なフォントサイズ調節CSSを例にする。数字にはあんまり意味はない。 @media (min-width: 960px) { html { font-size: 20px; } } このCSSが指定されているHTMLページを900pxの幅で開いてからズームで90%に縮小するケース
メディアクエリー - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
メディアクエリー
この文書は「Media Queries (W3C Recommendation 19 June 2012)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 公開日: 2012-06-29 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> メディアクエリー 2012 年 6 月 19 日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ 最新版: http://www.w3.org/TR/css3-mediaqueries/ 最新
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
