web-dev-qa-db-ja.com

CSS-この場合に使用するのに最適なもの（px、％、vw、wh、またはem）？

アプリの開発にIonic2を使用していますが、アプリをさまざまなサイズでプレビューする必要があります。現在、すべてのサイズ、フォントサイズ、パディングなどでvwを使用していますが、フォントのサイズを変更すると、少し小さくなったり、テキストが読みにくくなる場合があります。そのため、この場合（px、％、vw、whまたはem）のどちらが最適であるかを知りたいと思います。

または@ mediaも使用して、異なるフォントサイズをサポートする必要がありますか？

何かご意見は？

htmlcssionic2
9
Hamza L.

私はあなたが尋ねたものだけを述べたことに注意してください。

ここでは、CSS測定単位の完全なリストを確認できます。 W3SchoolsのCSS単位

どちらが「正しい」かを伝えるのではなく、実際にそれぞれが何であるかを理解してほしい。

ピクセル（px）：絶対ピクセル。したがって、たとえば、20pxは、どの画面でも文字通り20ピクセルになります。モニターが1980x1200であり、要素の高さを200pxに設定した場合、要素はその200ピクセルを取得します。

パーセンテージ（%）：親の値を基準にします。

したがって、この例では：

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>

内側のdivの幅は100ピクセルです。

ビューポートの高さ/幅（vw/vh）：ビューポート（基本的にブラウザウィンドウ）に対するサイズ。

例：

.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}

ブラウザ全体を赤くカバーします。これは flexboxes の間で非常に一般的です。自然に応答するためです。

Emeters（em）とRoot Emeters（rem）：emは親を基準にしています要素のフォントサイズ。 remは、htmlフォントサイズ（大部分は16ピクセル）を基準にしています。これは、プロジェクト全体で「サイズの相対性を念頭に置いて」おく必要があり、SassやLessなどのプリプロセッサで変数を使用しない場合に非常に役立ちます。ただもっと簡単で直感的だと思います。

例：

.myDiv {
    font-size: 0.5rem;
}

フォントサイズは8ピクセルになります。

あなたは知っているので、適切な目的のために適切なものを選択してください。

18
Ariel Weinberger

w3schools.com には、CSSユニットに関するかなりいい要約があります。

私自身は常にemを使用しています。どうして？

まず、emはあなたのfont-sizeを基準にしています。したがって、w3schoolが言うように、2emは、2倍で定義したfont-sizeの親コンテナ。したがって、htmlタグに特定のfont-sizeを定義し、必要なemを使用して、さまざまなタスクの相対font-sizesを処理できます。

また、emはほとんどすべてのブラウザでカバーされています。

少なくとも、モバイルデバイスのレスポンシブ@media-queries処理にはfont-sizeを使用できます。したがって、emを使用して、@media-queriesを相対font-sizeと組み合わせて使用​​することを検討できます。

1
Aer0

これはおそらく閉じられるでしょうが、emユニットは非常にスケーラブルであるため、特にモバイルブラウザーで使用できるため、メディアクエリを一緒に使用するので、私はemユニットを使用するのが大好きです。私は本当にあなたが何をしているかに依存します。

優れたサイトはおそらく数emsと数pxの比率で構成されます。そのため、最終目標が何であるかによって、どちらを使用するかが決まります。

あなたがそれぞれのアプリケーションを理解すれば、あなたはあなたがどちらがより好きになるかを決めることができます。 W3SchoolsとW3codeの両方に良い記事があります...

0
Dion Matthew Levy