前端媒体查询

wendy_qx

已于 2023-06-05 10:48:53 修改

阅读量205

点赞数

分类专栏： javaScript方法文章标签： css Powered by 金山文档

于 2023-02-13 14:28:20 首次发布

本文链接：https://blog.csdn.net/wendy_qx/article/details/129008513

版权

javaScript方法专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<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>