レスポンシブデザイン

デバイスのウィンドウ幅に「responsive(よく反応)」して、見やすい表示に自動で切り替える。

メディアクエリ

基本文法

@media (max-width: 430px) {
    main {
    margin-left
    
    }

}

できること：さまざまな（印刷、音声の制御とサイズによって表示を変える）

@media (条件) {
  /* 条件に合致した場合に適用されるスタイル */
}

条件の部分には、以下のものが指定できます。
画面サイズ: width, height
デバイス: screen, print
向き: orientation (landscape, portrait)
解像度: resolution
その他: min-width, max-width, min-height, max-heightなど

より詳しい情報を得るために

MDN Web Docs: https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries
W3Schools: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp