@media (max-width: 400px) { … } は「画面幅が400px以下のときこの中のCSSを使って」という意味。プレビューは幅が固定なので、max-width の数字を 1000 や 200 に変えて、色が切り替わるのを体感しよう（本番のスマホ確認は実機で！）。