タグ

ブックマーク / butchi.github.io (1)

  • rem単位を用いたレスポンシブ対応ページの実装デモ

    Tweet rem単位を用いたレスポンシブ対応ページの実装デモ はじめに 技術のポイントは1つだけです。可変にしたい要素すべてのサイズ指定にrem単位を用いることにより、普通にやると面倒なレスポンシブ対応がfont-sizeのみの変更で済むことです。 このサイトがデモです。 (ウィンドウ幅を狭くしたり右上のチェックボックスを切り替えてみてください。) きっかけ 2015年9月ごろにAppleサイトのサポートページ(https://support.apple.com/ja-jp/HT...)を開いたところ、大きな表示崩れが生じていました。 Appleサイトのバグ(左: IE Edgeでの表示 右: Chromeでの表示) 画像提供元: 情報科学屋さんを目指す人のメモ CSSを解読したところ、要素のところどころにrem単位を用いたサイズ指定が施されていました。 これは単なる凡ミスではないと考

    rem単位を用いたレスポンシブ対応ページの実装デモ
    efcl
    efcl 2016/02/20
    remよりブラウザの最小フォントサイズが優先されるという話
  • 1