前端媒体查询

<style lang="scss" scoped="">
.example {
  padding: 20px;
  color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
  .example {
    background: red;
  }
}
 
/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
  .example {
    background: green;
  }
}
 
/* 中型设备（平板电脑，768 像素及以上） */
/* // @media only screen and (min-width: 768px) {
  //   .example {
  //     background: blue;
  //   }
  // } */
@media (min-width: 600px) and (max-width: 768px) {
  /* // 在屏幕宽度为 px 和 px 之间这部分代码将被触发
      // .example {
      //   background: blue;
      //   color: palegreen;
      // } */
 
  .example {
    background: blue;
    color: palegreen;
  }
}
 
/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
/* // @media only screen and (min-width: 992px) {
  //   .example {
  //     background: orange;
  //     color: red;
  //   } */
@media (min-width: 768px) and (max-width: 1200px) {
  /* // 在屏幕宽度为 px 和 px 之间这部分代码将被触发 */
  .example {
    background: orange;
    color: red;
  }
}
 
/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }
}
</style>