Foundation 3.0 UIフレームワークを使用して大規模なWebアプリケーションを作成していますが、ピクセルベースのレイアウトとフォントサイズが設定されています。
デザインには、「em」ベースのフォントサイズ/行の高さとパディング/マージンがあります。スマートフォンのレスポンシブレイアウトに「em」ベースのフォントサイズとパディングを選択するのは良いオプションですか?
Foundation 3.0 UIフレームワークを使用して大規模なWebアプリケーションを作成していますが、ピクセルベースのレイアウトとフォントサイズが設定されています。
デザインには、「em」ベースのフォントサイズ/行の高さとパディング/マージンがあります。スマートフォンのレスポンシブレイアウトに「em」ベースのフォントサイズとパディングを選択するのは良いオプションですか?
レスポンシブ デザインの主な利点はem
、さまざまな画面サイズでフォント サイズを簡単に変更できることだと思います。
たとえば、大きな画面と小さな画面 (携帯電話や TV など) でメディア クエリを使用する場合、両方のフォント サイズを変更する必要があります。
すべてのサイズが である場合は、次のように本体em
の を簡単に変更できます。font-size
/* For TV's (or other large screens */
@media screen and (min-width: 1800px) {
body { font-size: 1.4em; }
}
/* For mobiles */
@media screen and (max-width: 400px) {
body { font-size: 0.9em; }
}
すべてのサイズpx
が揃っているかのように、フォントのサイズを変更するためにさらに多くの作業を行う必要があります。
EDIT:マージン+パディングに使用em
することは、私が理解しているように、レスポンシブレイアウトにも良い考えかもしれません。本文のフォントサイズを変更すると(上記のように)、マージン+パディングもサイズ変更されます(それらを小さくするか、これは、レスポンシブ デザインにも非常に有益です。
はい、レスポンシブデザインのウェブサイト/アプリケーションにはem%
以上を使用する方が間違いなく優れています。これは絶対値とは異なり、スマートフォンやタブレットなどをターゲットにする場合に重要な、表示される解像度に応じてスケーリングできるためです。px
px
em