web-dev-qa-db-ja.com

メディアクエリを使用したレスポンシブデザイン：画面サイズ？

私は、メディアクエリを使用してレスポンシブデザインされたWebサイトに取り組んでいます。しかし、私は良い幅セットを取る方法がわかりません。

device resolution table

この表でわかるように、単一のタイプのデバイスであっても、さまざまな解像度があります。そして、モバイルデバイスで解像度がますます大きくなっているため、特定の解像度に適用するデザインを知るのは困難です。

今のところ、私はこれを使用しています：

モバイルファースト

@media画面および（min-width：720px）=> Phablet

@media画面および（min-width：768px）=> Tablet

@media画面および（min-width：1024px）=> Desktop

アドバイスや勧告をありがとう！

cssresponsive-designmedia-queriesmobile-websitescreen-resolution
13
oOnez

レスポンシブWebデザイン（RWD）は、最適な視聴体験を提供するためにサイトを作成することを目的としたWebデザインアプローチです。

レスポンシブWebサイトを設計するときは、デバイスの種類ではなく画面のサイズを考慮する必要があります。メディアクエリは、そのために役立ちます。

デバイスごとにサイトのスタイルを設定する場合は、user agentの値ですが、画面サイズを使用している間は新しいデバイス、新しいブラウザ、ブラウザのバージョンなどのコードを維持するために一生懸命努力する必要があるため、これは推奨されません。

いくつかの標準解像度を見ることができます このリンクで 。

[〜＃〜] but [〜＃〜]、私の意見では、最初にウェブサイトのレイアウトを設計し、その後メディアクエリで調整する必要があります可能な画面サイズに合わせて。

どうして？前にも言ったように、画面解像度の多様性は大きく、320pxを対象とするモバイルバージョンを設計する場合、サイトは350px画面または400px画面に最適化されません。

[〜＃〜] tips [〜＃〜]

  1. レスポンシブページを設計するときは、デスクトップブラウザーで開き、ブラウザーの幅を変更して、画面の幅がレイアウトとスタイルにどのように影響するかを確認します。
  2. ピクセルの代わりにパーセンテージを使用すると、作業が簡単になります。

例

5列のテーブルがあります。画面サイズが600pxより大きい場合、データは良好に見えるので、600pxにブレークポイントを追加し、画面サイズが小さい場合は重要度の低い1列を非表示にします。デスクトップやタブレットなどの大きな画面を備えたデバイスはすべてのデータを表示し、小さな画面を備えた携帯電話はデータの一部を表示します。

心の状態

質問に直接関係するのではなく、レスポンシブデザインの重要な側面。レスポンシブデザインは、ユーザーが携帯電話やデスクトップを使用しているときに異なる精神状態を持っているという事実にも関連しています。たとえば、夕方に銀行のサイトを開き、在庫を確認するときに、画面上に必要なデータを表示します。昼休みに同じページを開くと、おそらく昨年のすべてのグラフではなく、いくつかの重要な詳細を見たいと思うでしょう。

16
Itay Gal

一般的なデバイスブレークポイントのメディアクエリを次に示します。

    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
16
muni

画面幅Bootstrap v3.xの使用は次のとおりです。

  • Extra small devices電話番号(<768px)/.col-xs-
  • Small devicesタブレット(≥768px)/.col-sm-
  • Medium devicesデスクトップ(≥992px)/.col-md-
  • Large devicesデスクトップ(≥1200px)/.col-lg-

そのため、これらは実際に使用して適切に機能します。

4
Atrix

これを見てください... http://getbootstrap.com/

大きなWebサイトの場合は Bootstrap を使用し、時々（単純なWebサイトの場合）@mediaqueriesを使用してすべてのスタイルを作成します。それは非常に単純で、すべてのコードをパーセンテージで考えるだけです。

.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

コンテナ内では、構造の幅は次のようにパーセンテージで指定する必要があります...

.col-1 {
width: 40%;
float: left;
}

.col-2 {
width: 60%;
float: left;
}

@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}

いくつかのシンプルなインターフェイスでは、この方法でプロジェクトの開発を開始すると、オブジェクトのフローを調整するためだけにブレークポイントを使用して完全にレスポンシブなサイトを作成できる可能性が高くなります。

2
Ico Portela

@muniのソリューションは私にとって少しやり過ぎだったので、私は私のものを提供します

注：複数の解像度のカスタム定義を一緒に追加する場合は、次のように言います。

//mobile generally   
 @media screen and (max-width: 1199)  {

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

正確な定義の上にそれらの定義を追加するようにしてください。正しくカスケードされます（たとえば、「スマートフォンの肖像画」が「モバイル全般」に対して勝つ必要があります）

//here all definitions to apply globally


//desktop
@media only screen
and (min-width : 1200) {


}

//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px)  {

} // end media query

//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px)  {

}//end media definition


//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px)  {

}//end media query



//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {

}

//end media query
1
Toskan