1

ただし、ほとんどのレスポンシブ デザインでは可変レイアウトが使用されます。

  1. レスポンシブ デザインにピクセル/固定ベースのレイアウトを使用することは可能ですか (明らかに、ブレークポイントがはるかに目立ちます)。

  2. ピクセルベースのレスポンシブデザインの例はありますか?

4

4 に答える 4

2

CSS Media Queries. _

ソース: http://css-tricks.com/css-media-queries/

デモ: http://css-tricks.com/examples/MediaQueriesSidebar/

ブラウザのサイズを変更して、ページがさまざまなウィンドウ サイズにどのように適応するかを確認してください。

于 2012-07-11T19:36:54.303 に答える
1

これは非常に難しく、異なるビューポート サイズに応じて px を使用して多くのコードを記述する必要があると思います。サポートするビューポートが多くない場合、たとえばモバイル サイズと 1024 ピクセルのデスクトップ サイズのみをサポートする場合は、達成可能だと思います。

ただし、「グリッド」を介してデザイン レイアウトを実行できる場合は、Heroku Fluid Layoutsを使用できます。

デスクトップ ビューに通常の px を使用してから、メディア クエリを使用して % グリッドの流体でオーバーライドします。

于 2012-07-11T20:54:58.437 に答える
0

最初の質問に答えるには、アダプティブデザインはレスポンシブデザインのスーパーセットであるため、流体グリッドを使用しないレスポンシブデザインは実際にはアダプティブデザインであるというのが一般的な考え方です。流体グリッドなしでレスポンシブデザインを作成できますか？厳密に言えば、おそらくそうではありません。詳細説明。

ただし、ピクセル値を使用して複数の画面サイズでWebサイトの見栄えを良くしたい場合は、アダプティブデザインを使用できます。それほど堅牢ではなく、多くのデバイスで動作しませんが、プロジェクトによっては必ずしも必要ではありません。開始するためのフレームワークを探している場合は、Skeleton.jsを確認することをお勧めします。このiOSアプリのプロモーションページのように、すばやく簡単なものを作成したいときに、以前はこれを使用していました。

お役に立てば幸いです。

于 2012-10-05T01:51:36.437 に答える
0

他の回答があなたの質問をカバーしているため、追加することはあまりありませんが、メディアクエリにピクセルを使用することを選択した場合、ブレークポイントは目立ちますが、サイズ変更に良い効果をもたらすためにいつでもアニメーション化できます。

.container {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-in-out;

}

@media screen and (min-width: 320px) {
    .container {width:320px; background:red;}
}

@media screen and (min-width: 480px) {
    .container {width:480px; background:green;}
}
于 2012-09-13T15:00:21.953 に答える