javascript - これらの列はJavaScriptなしで構成をどのように変更しますか

Question

このサイトに気づいたとき、画面サイズによってコンテンツの配置を変える方法を探していました。かなり見栄えの良いサイトでもあります。ブラウザのサイズを変更すると、列の構成が変更されますか？最小サイズに縮小するか、電話でアクセスすると、上部の大きな画像が完全に消え、小さなアイコンだけが残ります。JavaScriptをオフにしましたが、これはまだ発生します。また、それは私のie8で動作するので、HTML5の感謝ではないと思います。それはどのように行われていますか？

ありがとう！

Answer 1

この効果はJavascriptによって行われているのではなく、CSS@mediaクエリによって行われています。CSSTricksのChrisCoyierは、@mediaクエリのすばらしい紹介をしています。

簡単に言うと、ブール式に基づいてスタイルシートのスコープを指定し（ウィンドウ幅が、この例で使用した特定の幅であるかどうかを確認するなど）、特定のスタイルを適用してレスポンシブデザインにすることができます。