25

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

  /* 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) {}
4

3 に答える 3

44

次のような「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 か所で簡単に変更でき、毎回すべてを記述する必要もありません。

于 2012-04-05T10:47:58.447 に答える
26

レスポンシブレイアウトに推奨される幅はありません。それは完全にあなたのレイアウト構造に依存します。Layout Structureつまり、特定の幅で特定の変更が必要な場合、またはレイアウトが特定の画面幅を壊した場合にMEDIAQUERIESを使用します。

于 2012-04-05T10:22:32.357 に答える
4

レスポンシブ レイアウトを使用する際に適用されるベスト/一般的なプラクティスと特定の幅を探している場合は、すぐに利用できるグリッド システムを調べることをお勧めします。簡単な Google 検索で多くの結果が得られますが、私のお気に入りの 1 つは cssgrid.net の 1140 グリッドです (サイトは利用できなくなりました)。逐語的に:

1140 グリッドは 1280 モニターに完全に収まります。小さいモニターでは流動的になり、ブラウザーの幅に適応します。スクラップ1024！1280 に対して 1140 で一度設計すれば、余分な作業をほとんど行わずに、モバイルを含むほぼすべてのモニターで動作するように適応します。

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

于 2012-04-05T10:36:00.960 に答える