レスポンシブUIの原理

根本的には、どういう仕組みで実装されているのかをシンプルにいうと、メディアクエリを使う。

@media (min-width: 580px) {}
@media (min-width: 870px) {}
@media (min-width: 1160px) {}
@media (min-width: 1450px) {}

こういうやつ。それぞれのメディアクエリ内にCSSを記述することで、特定のスクリーン幅の状態でのみ効かせたいスタイルを定義できるようだ。これにより、ワイドスクリーンでは4カラム、小さめのスクリーンでは2カラム、スマホでは1カラムというように構造を変えることができる。