レスポンシブしたい

さまざまな端末や機器のサイズに対応するデザイン手法を「レスポンシブ・ウェブ・デザイン」と呼びます。 タブレット、携帯電話、テレビなどのどれで表示しても、自動的に画面に合わせることができるものです。

ビューポートしたい

<meta name="viewport" content="width=device-width initial-scale=1">

メディアクエリしたい

@media print {
    .container {
        font-size: 10pt;
    }

}

@media screen {
    .container {
        font-size: 12pt;
    }
}

@mediaを使って、メディア種別を指定できます。 メディア種別はall、print、screen、speechから選択できます。 ブラウザで表示する設定の場合はscreenを指定します。

メディアクエリは複数設定できるため、印刷時とブラウザ表示時で文字サイズを変えることもできます。

ブレークポイントしたい

@media (max-width: 575.98px) { /* スマホ縦持ち */ };
@media (max-width: 767.98px) { /* スマホ横持ち */ };
@media (max-width: 991.98px) { /* タブレット */ };
@media (max-width: 1199.98px) { /* デスクトップ */ };
@media (max-width: 1399.98px) { /* でかいデスクトップ */ };

メディア特性（の画面幅）を使って、ブレークポイントを設定します。 min-widthもしくはmax-widthを使ってデバイス幅によって場合分します。 上記サンプルはBootstrap5の設定を参考にしたものです。 指定する幅の大きさは、デバイスの普及状況によって変化します。

注釈

以下のようにメディア種別（@media screen）と一緒に書く場合もありますが、いまはメディア特性だけでOKのようです。

@media screen and (max-width: 575.98px ) { /* スマホ縦持ち */};