Vue 프로젝트 부트스트랩 Breakpoint(반응형)

 

Vue 프로젝트 부트스트랩 Breakpoint(반응형)

 

1. /src/components/Header.vue 수정

- 로고 제작 (로고 클릭 시에 About 페이지로 이동)

- 네비 반응형 작업

...
    <div class="nav nav-pills">
      ...
    </div>
    <div class="user">
      class="user"
      @click="toAbout">
      <img
        :src="image"
        :alt="name" />
    </div>
...

...
  computed: {
    image() {
      return this.$store.state.about.image
    },
    name() {
      return this.$store.state.about.name
    }
  },
  methods: {
    isMatch(path) {
      ...
    },
    toAbout() {
      this.$router.push('/about')
    }
  }
...

<style lang="scss" scoped>
@import "~/scss/main";

header {
...
  position: relative;
  .logo {
    margin-right: 40px;
  }
  .user {
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: $gray-200;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    margin: auto;
    transition: .4s;
    &:hover {
      background-color: darken($gray-200, 10%);
    }
    img {
      width: 100%;
    }
  }
  @include media-breakpoint-down(sm) {
    .nav {
      display: none;
    }
  }
}
</style>

 

결과

 

2. /src/components/Search.vue 수정

- 반응형 작업

..
<style lang="scss" scoped>
@import "~/scss/main";

.container {
  ...

  @include media-breakpoint-down(lg) {
    display: block;
    input {
      margin-right: 0;
      margin-bottom: 10px;
    }
    .selects {
      margin-right: 0;
      margin-bottom: 10px;
      select {
        width: 100%;
      }
    }
    .btn {
      width: 100%;
    }
  }
}
</style>

 

3. /src/routes/Movie.vue 수정

- 반응형 작업

...
<style lang="scss" scoped>
@import "~/src/scss/main";

...
.movie-details {
  ...
  
  @include media-breakpoint-down(xl) {
    .poster {
      width: 300px;
      height: 300px * 3 / 2;
      margin-right: 40px;
    }
  }
  @include media-breakpoint-down(lg) {
    display: block;
    .poster {
      margin-bottom: 40px;
    }
  }
  @include media-breakpoint-down(md) {
    .specs {
      .title {
        font-size: 50px;
      }
      .ratings {
        .rating-wrap {
          display: block;
          .rating {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>

 

---

 

참고

https://getbootstrap.com/docs/5.1/layout/breakpoints/

Breakpoints