web-dev-qa-db-ja.com

レスポンシブレイアウトの推奨幅

レスポンシブレイアウトに使用する幅は何をお勧めしますか？

  /* Default Width: */
  .container { width: 940px; margin: 0 auto; }

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}
htmlcsscss3responsive-design
24
Jürgen Paul

レスポンシブレイアウトには推奨幅はありません。レイアウト構造に完全に依存します。 Layout Structureは、[〜＃〜] mediaqueries [〜＃〜]を使用することを意味します。特定の幅で特定の変更が必要な場合、またはレイアウトが特定の画面幅を超えた場合。

25
sandeep

次のような「320以上」の幅を使用し始めました。

ただし、それらは小さなものから大きなものへと移動しますが、逆ではありません。これは、プログレッシブエンハンスメントに沿ったものであり、とにかく間違いなく推奨されます： http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://stuffandnonsense.co.uk/projects/320andup/

// Default styling here

// Little larger screen
@media only screen and (min-width: 480px) {

}

// Pads and larger phones
@media only screen and (min-width: 600px) {

}

// Larger pads
@media only screen and (min-width: 768px) {

}

// Horizontal pads and laptops
@media only screen and (min-width: 992px) {

}

// Really large screens
@media only screen and (min-width: 1382px) {

}

// 2X size (iPhone 4 etc)
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

}

Sassを使用している場合、私が使用している小さなトリックを次に示します。

$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc

その後

@media #{$laptop-size} {
    // Styling here...
}

この方法では、幅を1か所で簡単に変更でき、毎回すべてを書く必要もありません。

42
powerbuoy

レスポンシブレイアウトを使用する際に適用されるベスト/一般的なプラクティスと特定の幅を探している場合は、grid systemsをすぐに利用できるようにすることをお勧めします。クイックGoogle検索では多くの結果が得られますが、私のお気に入りの1つはcssgrid.netの1140グリッドです（サイトはもう利用できません）-測定値を選択する際の論理に非常に同意します。逐語的：

1140グリッドは1280モニターに完全に適合します。小さいモニターでは流動的になり、ブラウザーの幅に適応します。スクラップ1024！ 1140年に1280で一度設計すると、追加の作業はほとんど必要なく、モバイルでも、ほぼすべてのモニターで動作するようになります。

これが探していた種類の答えではない場合は、質問を言い換えてください。

4
o.v.