Vue中实现响应式

效果展示

屏幕最大化的展示效果

image.png

801px-1200px的展示效果

image.png
0-800px的展示效果
image.png

解决思路

利用@media判断屏幕尺寸变化

源代码

<template>
  <div class="window">
    <div
      class="item"
      v-for="item in 6"
      :key="item"
    >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<style lang="scss" scoped>
$home-max: 9900px;
$home-middle: 1200px;
$home-min: 800px;
.window {
  .item {
    display: inline-block;
    width: 300px;
    height: 200px;
    background-color: red;
    margin-bottom: 24px;
    @media screen and (min-width: $home-middle+1) {
      & {
        width: calc(100% / 3 - 16px);
      }
      &:nth-child(3n + 2) {
        margin-left: 24px;
        margin-right: 24px;
      }
    }
    @media screen and (max-width: $home-middle) and (min-width: $home-min+1) {
      & {
        width: calc(100% / 2 - 12px);
      }
      &:nth-child(odd) {
        margin-left: 0px;
        margin-right: 24px;
      }
    }
    @media screen and (max-width: $home-min) {
      & {
        width: 100%;
      }
    }
  }
}
</style>