em vs px ...モバイルブラウザ用
デスクトップブラウザの場合、最新のブラウザはすべてズーム機能を使用しているため、PXを使用できますが、同じサイトがモバイルで表示される場合、pxはモバイルブラウザでのズームには適していません。またはpxの使用もモバイルブラウザには問題ありません。
IE 6を気にしない場合でも、モバイル用に別のサイトを作成していない場合は、pxの代わりにemを使用すると、デスクトップと携帯電話の両方で同じサイトが表示されます（iphone、blackberry、windows mobile、opera mini、Androidなど？
最新のモバイルブラウザで画面をズームアウトすると、pxは実際の実際のピクセルにはなりません。これらのブラウザは、デスクトップブラウザサイズのピクセルでデスクトップブラウザを効果的にエミュレートしています。
したがって、pxを使用するこのタイプのブラウザの場合、通常のデスクトップブラウザの場合よりも悪くはありません。大きな問題なしに必要な場合はそれを行うことができますが、どちらの状況でも、可能であれば、本体のコンテンツにはemが適しています。
このトリックを使用して、CSSでフォントをpxからemに変換できます。
body {
font-size: 62.5%; /* resets the page font size */
}
次に、次のようにフォントサイズを指定します。
p {
font-size: 0.8em; /* equals 8px */
font-size: 1.0em; /* equals 10px */
font-size: 1.6em; /* equals 16px */
font-size: 2.0em; /* equals 20px */
}
等々。次に、 PXtoEm.com でレイアウト用にpxをemに変換できます。
PXは固定ピクセルサイズですEMはフォントサイズに関連しています
だから本当に、はい、あなたはおそらくもっと多くのウェブサイトにEMを使うべきです。これにより、ユーザーはフォントの大きさを定義でき、サイトはそのフォントを中心に拡大縮小できます。
ただし、ほとんどのWeb開発者は、物事が相互にどのように表示されるかを正確に知ることができるため、より具体的なPXを好みます。
しかし、デスクトップとモバイルの解像度は大幅に異なるように思われるため、モバイルブラウジング用にサイトを再設計する方が簡単になるでしょう。
一般的に、特にモバイルデバイス向けに開発する場合は、ピクセル精度の設計を使用しないことをお勧めします。理由は簡単です：
- あなたは小さな解像度から> 1920x1080までの範囲の画面を備えたデバイスを扱っており、「万能」アプローチはありません。また、ブラウザにズーム機能が存在することさえユーザーが知らない可能性があることも考慮してください。
- モバイルデバイス向けに開発する場合、さまざまなフォントサイズをサポートしているものは多くないため、ピクセル単位の正確なフォントに依存することはできません。一部のモバイルブラウザでは、行の高さがまったくサポートされていません。したがって、デザインがたとえばメニューバーのピクセル精度に依存していて、バーをxピクセルの高さに設計した場合、結果は完全に間違って見える可能性があります。
ダン・セダーホルムの本「防弾ウェブデザイン」は、タイトルが示唆するほど防弾ではないかもしれませんが、質問に答えたり、問題を解決したりするための本当に良いスタートです。
ピクセルは固定されており、1つのピクセルはモバイルでもディスプレイでも同じ場所を使用します。 Emは相対的であり、大文字の「M」のおおよそのサイズを使用するため、このように呼ばれます。
したがって、はい、emsを使用する必要があります。これは、emsが画面に応じて調整され、フォントがそれらによりよく適合する可能性があるためです。