如何应用基于条件媒体查询的CSS？

<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="styles.css">

@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于600像素时应用以下样式 */
  body {
    background-color: lightblue;
  }
}

@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于600像素时应用以下样式 */
  /* ... */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 在屏幕宽度大于600像素且小于等于1024像素时应用以下样式 */
  /* ... */
}

@media screen and (min-width: 1025px) {
  /* 在屏幕宽度大于1024像素时应用以下样式 */
  /* ... */
}