2

このサイトはどのようにしてこの効果を達成しましたか?

http://demicreative.com

サイトを表示しているウィンドウのサイズを変更するだけで、モバイルに合わせて完全に変更されます。

どうすればこれを行うことができますか?!?

誤解を招くようなタイトルでしたらご容赦ください

4

3 に答える 3

9

これはレスポンシブウェブデザインと呼ばれる手法です。一言で言えば、この手法は、ページがレンダリングされている画面のサイズに応じて異なる応答に基づいています。そのため、ウィンドウのサイズを変更すると、コンテンツはこの「新しい」画面に適合します。

これは、メディアクエリを使用して実行できます。これにより、デザイナーは特定のデバイスクラスをターゲットにするだけでなく、ページをレンダリングするデバイスの物理的特性を検査できます。

したがって、たとえば、CSSに次のコードを含めることができます。

@media screen and (max-width: 480px) {
  .column {
    float: right;
  }
}

.columnこれは、画面の幅が480pxより小さい場合に、クラスのすべての要素を右にフロートさせます。

于 2012-06-27T04:46:14.163 に答える
2

Get Sleleton を使用して、そのようなことを達成できます http://www.getskeleton.com

Html5 ボイラープレート https://github.com/h5bp/html5-boilerplate/wiki/css

于 2012-06-27T04:43:29.270 に答える
2

これはメディアクエリと呼ばれます。CSS3準拠。

http://www.w3.org/TR/css3-mediaqueries/

リンクの例では、これは CSS のメディア クエリです。

@media all and (max-width: 480px) {
  h1 {
    background: #141414;
    font-size: 25px;
    height: 105px;
    line-height: 30px;
    padding-top: 120px;
    text-shadow: none;
  }
  h1 i {
    display: none;
  }
}

そのため、デバイスの最大画面幅が 480px の場合にのみ CSS がアクティブになります。基本的に、タブレットやモニターではなく、電話です。

于 2012-06-27T04:45:24.440 に答える