web-dev-qa-db-ja.com

一般的なCSSメディアクエリのブレークポイント

私はCSS Media Queriesを使ってレスポンシブWebサイトに取り組んでいます。

次はデバイスの良い組織ですか？電話、iPad（風景とポートレート）、デスクトップとノートパソコン、大画面

一般的なメディアクエリのブレークポイント値は何ですか？

次のブレークポイントを使用する予定です。

  • 320：スマートフォンの肖像画
  • 481：スマートフォンの風景
  • 641または768 ???：iPadのポートレート???
  • 961：iPadランドスケープ/スモールラップトップ
  • 1025：デスクトップとラップトップ
  • 1281：ワイドスクリーン

どう思いますか？私はいくつかの疑問がありますか？？？ポイント.

cssresponsive-designmedia-queries
144
Miguel Moura

特定のデバイスで@mediaルールをターゲットにするよりも、代わりに特定のレイアウトに基づいてそれらをベースとする方が間違いなく実用的です。つまり、デスクトップブラウザウィンドウを徐々に狭めて、コンテンツの自然なブレークポイントを観察します。サイトごとに異なります。デザインが各ブラウザの幅でうまく流れる限り、どの画面サイズでも確実に機能するはずです（そしてそこにはたくさんのものがあります）。

177
ralph.m

私は使っています：

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

それは物事を比較的単純に保ち、縦長モードの電話のためにあなたが少し違った何かをすることを可能にする（私は私自身がそれらのために様々な要素を変更しなければならないと思う多くの時間）。

81
boz

私は4つのブレークポイントを使っていますが、ralph.mが言ったように各サイトはユニークです。あなたは実験するべきです。非常に多くのデバイス、画面、および解像度による魔法のブレークポイントはありません。

これが私がテンプレートとして使うものです。異なるモバイルデバイス上の各ブレークポイントについてWebサイトをチェックし、そのブレークポイントに対して正しく表示されない各要素（ul、divなど）のCSSを更新しています。

これまで私が作った複数のレスポンシブWebサイトに取り組んでいました。

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}

UPDATE

2015年9月の時点で、私はもっと良いものを使っています。これらのメディアクエリのブレークポイントは、より多くのデバイスとデスクトップの画面解像度に一致することがわかりました。

デスクトップ用のすべてのCSSをstyle.cssに配置する

Respond.cssに対するすべてのメディアクエリ：レスポンシブメニュー用のすべてのCSS +メディアブレークポイント

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

アップデート2019年：以下のHugoのコメントの通り、私は新しいワイドスクリーンのためにmax-width 1999pxを削除しました。

68
Adrian P.

これはcss-tricks リンクからです

/* 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 */
}

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
48
Nur Rony

768のブレークポイントを1つだけ使用していることがわかります。つまり、min-width: 768pxはタブレットとデスクトップを提供し、max-width: 767pxは電話を提供します。

私はそれ以来振り返っていません。レスポンシブ開発を簡単にし、面倒ではなく、開発に要するコストを最小限に抑えてすべてのデバイスで妥当なエクスペリエンスを提供します。新しいAndroidデバイスを新しい解像度で考慮に入れる必要はありません。

17
DannyB

Twitterのブートストラップ のブレークポイントの使用を検討してください。そのような大規模な採用率であなたは安全であるべきです...

10
elewinso

標準デバイス用のメディアクエリ

モバイル、タブレット、デスクトップ、および大画面の一般

1。携帯電話

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

    /* Styles */

    }

2。錠剤

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

3。デスクトップとラップトップ

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4。大きな画面

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

横や縦を含む詳細

/* 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 */
    }

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

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

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* 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 (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

参照

8
Suman K.C

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}
7
himansu

私はいつもデスクトップを最初に使いますが、モバイルが一番優先しませんか？ IE <8はモバイルCSSを表示します。

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

時にはいくつかのカスタムサイズ。私はブートストラップなどが好きではありません.

5
Marc

Googleアナリティクスにアクセスすると、Webサイトへの訪問者がどの画面解像度を使用しているかがわかります。

オーディエンス>テクノロジー>ブラウザとOS>画面の解像度（統計情報の上のメニューにあります）

私のサイトは月に約5000人の訪問者を得ていますそして ponsinator.com の無料版に使用されている寸法は私の訪問者のスクリーンの解像度のかなり正確な要約です。

これにより、完成度を上げすぎる必要がなくなります。

4
user2933101

ピクセルを使用する代わりに、emまたはpercentageを使用する必要があります。それは、より適応性があり流動的であるためです。

HTML5ロッカーが読んで、モバイルを先に

3
Mukesh

あなたのブレークポイントは本当によく見えます。私はサムスンのタブレットで768pxを試しましたが、それはそれを超えていますので、私は本当に961pxが好きです。あなたがブロックとイメージのための%width/max-widthのようなレスポンシブCSS技術を使うならば、あなたは必ずしもそれらすべてを必要としません（テキストも同様に）。

2
michael

画面の「メディア」タイプの設定ごとに、コードを整理し、スタイルシートを論理的に分離してください。


1）上記のヒマンスの回答を参考にしてください。 一般的なCSSメディアクエリのブレークポイント
そして
2） https://www.w3schools.com/css/css3_mediaqueries.asp

あなたの答えは、

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">
2
Luigi D'Amico