web-dev-qa-db-ja.com

異なる画面解像度のcss？

解像度の異なる2つの異なるシステムでhtmlを確認すると、ビューが歪んでいます。

実行時に画面の幅と高さを計算する方法はありますか？

私はcssの経験がありませんが、いくつかの調査を行い、次のことを発見しました：

https://css-tricks.com/css-media-queries/

しかし、彼らは異なるクラスを提案しています。（私が間違っていなければ）

私の質問は、実行時に高さと幅を取得し、CSSを1つだけ使用することは可能ですか？

何かのようなもの ：

.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
htmlcssmedia-queries
7
lesnar

メディアクエリは、問題に適しています。

これらに対して異なるクラスを使用する必要はなく、解像度に基づいて異なる動作を定義する必要があります。

画面の高さと幅はJavascriptで確認できますが、CSSでは不可能だと思います。 cssでできる最善の方法は、モバイル、タブレット、ラップトップ、超大画面デバイスなどのデバイスの範囲を定義し、メディアクエリに基づいて、特定のタイプのデバイスでクラスが実行することを定義できます。

以下の例を見てください：

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

実際の寸法はケースによって異なります。

これは、多くのフレームワークが応答性を実装するために使用する方法と同じです。

19
Kapil Soni

単一のメディアクエリで異なる属性を組み合わせることができます。この例では、幅が500px以上、高さが400px以上のすべての画面にこれらのスタイルを適用します。

@media all and (max-width: 500px) and (min-height: 400px) {
  body {
    background: #ccc;
  }
  .someclass {
    padding: 10px;
  }
}
2
Māris Kiseļovs

あなたの例では、最小幅または高さを設定したいので、おそらく画面サイズから計算された値を使用する必要があるだけです。その場合は、単位vwまたはvhを使用できます。これは、それぞれ画面の幅の1％と画面の高さの1％を意味します。

.view {
    min-width: 42vw; /* Equals 42% of screen width */
    min-height: 58vh; /* Equals 58% of screen width */
}

Calc（）関数を使用すると、より洗練された結果を得ることができます。そのために、CSS変数を調べることもできます。例えば：

.view {
    min-width: calc( 42vw - 12px );
    min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}

ただし、レイアウト、色、フォントなどを変更するなど、複数のルールが必要な場合は、メディアクエリが必要です。最も基本的な形式では、次のようにします。

@media (min-width: 800px){
    .class{
        /* Your styling goes here */
    }
}

上記の例では、画面の幅が800px以上の場合、メディアクエリ内のスタイル設定が有効になります。 （私は画面サイズに応じて異なるCSSファイルをロードしませんでした。）

最後に、Wordの「解像度」を使用したので、画面の解像度に一致するようにメディアクエリを設定できることも付け加えておきます。これは大きな画像を提供するときに便利です。例えば：

@media (min-width: 1200px),
       (min-width: 600px) and (resolution: 200dpi) {
    .my-image{
        content: url("http://example.com/high-def-image");
    }
}

これは、より大きな画面または網膜ディスプレイの漸進的な拡張として、より高い解像度の画像を提供するために使用できます。

1
isacvale

いいえ。彼らは異なるクラスを提案していません。メディアクエリを使用すると、画面（またはメディア）の解像度（幅、高さ、アスペクト比...）に基づいて異なるCSSルールを単一のファイルに設定するか、クエリに基づいて異なるスタイルシートを含めることができます。

メディアクエリの使用を開始するには、チュートリアルに従うことをお勧めします。

1
GiuServ