@media 可以针对不同的屏幕尺寸设置不同的样式

老司机

<!-- 宽度大于 900px 的屏幕使用该样式 --><link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">


@media screen and (max-width: 600px) {
  main {
    flex-direction: column;
  }
}

更多：https://www.runoob.com/cssref/css3-pr-mediaquery.html