css - - - - - media媒体查询

1. 如何根据不同屏幕宽度展示不同的组件?

直接上代码:

<template>
  <div>
    <div class="pc-display">我是pc展示</div>
    <div class="mobile-display">我是mobile展示</div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
// 屏幕大于 1024px时应用该样式
@media screen and (min-width: 1024px) {
  .pc-display {
    display: visible;
  }
  .mobile-display {
    display: none;
  }
}

// 屏幕小于 600px时应用该样式
@media (max-width: 600px) {
  .pc-display {
    display: none;
  }
  .mobile-display {
    display: visible;
  }
}

// 屏幕 大于600ox  &  小于1024px 时应用该样式
@media (min-width: 600px) and (max-width: 1024px) {
  .pc-display,
  .mobile-display {
    display: visible;
  }
}
</style>

• 屏幕大于 1024px时展示效果
  

• 屏幕小于 600px时应用该样式
  

• 屏幕 大于600ox & 小于1024px 时应用该样式