css - CSSのみでレスポンシブデザインを作成する方法

Question

CSS のみを使用してモバイル インターフェイスや小さな画面に適応する WordPress テーマを数多く見てきました。それがどのように行われたかについてのアイデアはありますか？

たとえば、テーマFoghornには、幅 750 ピクセル未満の画面では表示されないサイドバーがあります。私はコードを見てきましたが、CSS で行われていると確信しています。

このようなデザインを自分が作っているウェブサイトに採用したいと思っています。

アイデアをありがとう！

Answer 1

CSS でメディア クエリを使用する必要があります。

例：

@media screen and (max-width: 750px) {
    .someClass {
        display: block;
    }
}

@media画面幅が 750px 以下の場合にのみ、そのブロック内のすべてが適用されます。

min-widthまたは両方を組み合わせることもできます。