ブラウザのサイズを変更したときのコンテンツのスケーリング

Question

私はサイトで作業しており、ブラウザウィンドウのサイズが変更されるたびにコンテンツの縮尺を調整します。ここには、私がachieveにしようとしているものの例があります。私が何をしているかを見るためにブラウザをサイズ変更してください。誰かがこれを達成した方法を教えてもらえますか？あるいは、この技術は何と呼ばれていますか？私はすでにCSSをよく扱い、液体のレイアウトについて知っていますが、このサイトで使用されている技術は非常に異なっています。私は彼がいかにサイトの多くの部分をスケールすることができたのか、私の頭を包み込むことはできません。誰かがこれがどのように達成されたか教えてくれますか？私は技術の概念や名前の後にいるのです。ありがとう。

Answer 1

これはレスポンシブデザインと呼ばれ、件名にはpretty good bookがあります。

最も単純な言い方をすれば、メディアクエリを利用して、コンテンツをさまざまな解像度に合わせることができます。

/* targets screens matching the specific sizes */ 
@media screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) { 
    /* css rules here */ 
} 

@media screen 
    and (min-device-width: 481px) 
    and (max-device-width: 960px) { 
    ... 
} 

@media screen and (min-device-width: 961px) { 
    ... 
} 

サイズはすべて非常にあなたのコンテンツがどのようにワイドに基づいてされますし、あなたが最良のあなたのニーズに合わせて特定のサイズをターゲットにする必要があります使用しているレイアウトの種類。もちろんそれ以上のことはありますが、豊富なリソースとチュートリアルがあります。

Answer 2

Here's a link from "A List Apart"。彼らは流体グリッドとメディアクエリを使用して、ウィンドウでコンテンツサイズを確認します。記事には、何が起こっているかを見るためのコードがあります。

Answer 3

私は彼のcssとjavascript関数をチェックしたので、この行には何もないと思います。それを試して、それが動作するかどうかを確認してください。

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">