2

私はレスポンシブウェブデザインを検討していて、そうするための多くの方法に出くわしました、しかし私はそうするための最良の方法を区別するのに苦労しています。

私は-本当に-これらの2つのサイトがどのように機能するかが好きです:

  1. http://paulrobertlloyd.com/
  2. http://colly.com/

ただし、がどのようにレイアウトを動的に変更しているかを理解できないようです。以下にリストされていない、私が見逃しているテクニックはありますか?


これまでのところ、私は次の方法に出くわしました。

1:Javascript

-adapt.js

画面の解像度を動的に検出し、適切なスタイルシートを選択します。


2:CSS3メディアクエリ

次のような手法を使用します。

@media only screen and (max-width: 480px) and (min-width: 320px) {

}

3:バックエンド

-PHPファイルの先頭に追加

元のドメインをミラーリングし、ヘッダーを変更して、サイトの単一のモバイルバージョンでのみ実際に機能します。

4

2 に答える 2

4

それぞれのCSSファイルの下部にあるように、これらのWebサイトはどちらもメディアクエリを使用しています。

于 2011-10-10T13:58:34.370 に答える
2

これは一般にエラスティックCSSと呼ばれます。

ここにそのためのフレームワークがあります:http: //elasticss.com/ 私はそれを個人的に使用したことがないので、もっと良いものがあるかもしれません。

于 2011-10-10T13:58:01.973 に答える