無料ブログ「rentafree.net」の管理人ブログ

レスポンシブWEBデザインをpxからemに変更します

今まで当サービスの公式サイトのCSSでは、端末の横幅が999px以下の場合と1000px以上の場合でデザインを振り分けていましたが、
その方法だと7インチ程度以下のRetina端末ではモバイル用のレイアウトを適用したいが、PC用のレイアウトが使われていたはずです。

この問題は以前から認識していましたが、
CSSの振り分けをpxではなくemで行えば解決すると考えましたので、
公式サイトのCSSを変更しました。

今まで999pxを基準にしていましたが、60emが基準となりました。
フォントサイズ = 1em
となりますので、ブラウザのフォントサイズが関係してきますので、PCでもモバイル用のレイアウトが利用される可能性もあります。
60emですので、画面の横幅が60文字以下の場合にモバイルレイアウトとなります。


公式テンプレートにつきましても、同様の変更を行います。