vue当前页面进行的适配移动端和PC端布局

这边采用了效果图不明显 都是通过vw转译的布局 不管放大缩小 红色都保持固定 同时pc和移动端都不受影响 我这边是移动端的页面是宽高都撑满 话不多说 上代码

html

<template>
<div class="art">
<div v-if="isMobile" class="h5bgc">
  <!-- 移动端内容 -->
  <cl-image src="/img/tourArt.png" class="tourArt1"></cl-image>
  <router-link to="/tourArt1/index" class="tovr1">
    <div class="tovr"></div>
    <div class="arrowTransform"></div>
  </router-link>
  <router-link to="/tourArt2/index" class="tovr2">
    <div class="tovr"></div>
    <div class="arrowTransform"></div>
  </router-link>
  <router-link to="/tourArt3/index" class="tovr3">
    <div class="tovr"></div>
    <div class="arrowTransform"></div>
  </router-link>
  <router-link to="/tourArt4/index" class="tovr4">
    <div class="tovr"></div>
    <div class="arrowTransform"></div>
  </router-link>
  <router-link to="/tourArt5/index" class="tovr5">
    <div class="tovr"></div>
    <div class="arrowTransform"></div>
  </router-link>
</div>
<div v-else class="pcbgc">
  <!-- PC 端内容 -->
  <cl-image src="/img/tourArt.png" class="tourArt2"></cl-image>
  <router-link to="/tourArt1/index" class="tovr1">
    <div class="tovr"></div>
    <div class="arrowTransformpc"></div>
  </router-link>
  <router-link to="/tourArt2/index" class="tovr2">
    <div class="tovr"></div>
    <div class="arrowTransformpc"></div>
  </router-link>
  <router-link to="/tourArt3/index" class="tovr3">
    <div class="tovr"></div>
    <div class="arrowTransformpc"></div>
  </router-link>
  <router-link to="/tourArt4/index" class="tovr4">
    <div class="tovr"></div>
    <div class="arrowTransformpc"></div>
  </router-link>
  <router-link to="/tourArt5/index" class="tovr5">
    <div class="tovr"></div>
    <div class="arrowTransformpc"></div>
  </router-link>
</div>

js

export default {
  data() {
return {
  isMobile: false
}
  },
  created () {
const userAgent = window.navigator.userAgent;
if (/Mobile|Android|iPhone|iPod|iPad|Windows Phone/i.test(userAgent)) {
  // 如果是在移动端打开，则认为当前设备是移动设备
  this.isMobile = true;
}
  },
}

css

   <style lang="scss" scoped>

.h5bgc{
  position: relative;
  width: 100%;
  @media (max-width: 360px)  {
    .tourArt1 {
      height: calc(100vh + 100px);
    }
  }
  @media (max-width: 375px) {
    .tourArt1 {
      /* 在屏幕宽度小于等于样式 */
      height: calc(100vh + 300px);
    }
  }
  @media (min-width: 376px) {
    .tourArt1 {
      height: calc(100vh +0px);
    }
  }
  @media (max-height: 736px) {
    .tourArt1 {
      height: calc(100vh + 300px);
    }
  }
  @media (min-height: 740px) {
    .tourArt1 {
      height: calc(100vh);
    }
  }
  .tourArt1{
    background: url('/img/tourArt.png') no-repeat;
    background-size:100%;
    // height: 100%;
    width: 100%;
  }
  .tovr1{
    position: absolute;
    z-index: 9;
    left: 300px;
    right: 0;
    top: 65%;
    width: 50px;
    .tovr{
      height: 250px;
    }
  }
  .tovr2{
    position: absolute;
    z-index: 9;
    left: 390px;
    right: 0;
    top: 65%;
    width: 50px;
    .tovr{
      height: 250px;
    }
  }
  .tovr3{
    position: absolute;
    z-index: 9;
    left: 480px;
    right: 0;
    top: 65%;
    width: 50px;
    .tovr{
      height: 250px;
    }
  }
  .tovr4{
    position: absolute;
    z-index: 9;
    left: 565px;
    right: 0;
    top: 65%;
    width: 50px;
    .tovr{
      height: 250px;
    }
  }
  .tovr5{
    position: absolute;
    z-index: 9;
    right: 40px;
    top: 65%;
    width: 50px;
    .tovr{
      height: 250px;
    }
  }
}
.pcbgc{
  position: relative;
  width: 100%;
  text-align: center;
  .tourArt2{
    background: url('/img/tourArt.png') no-repeat;
    background-size:100%;
    width: 375px;
  }
  .tovr1{
    position: absolute;
    z-index: 9;
    left: 332px;
    right: 0;
    top: 65%;
    width: 28px;
    height: 150px;

    // background: red;
  }
  .tovr2{
    position: absolute;
    z-index: 9;
    left: 377px;
    right: 0;
    top: 65%;
    width: 28px;
    height: 150px;
  }
  .tovr3{
    position: absolute;
    z-index: 9;
    left: 422px;
    right: 0;
    top: 65%;
    width: 28px;
    height: 150px;
  }
  .tovr4{
    position: absolute;
    z-index: 9;
    left: 465px;
    right: 0;
    top: 65%;
    width: 28px;
    height: 150px;
  }
  .tovr5{
    position: absolute;
    z-index: 9;
    left: 515px;
    right: 0;
    top: 66%;
    width: 28px;
    height: 150px;
  }
}
.arrowTransform {
  z-index: 9;
  animation: bounce-inSS 2s infinite; /* 启动动画特效 */
  width: 24px;
  height: 32px;
  background: url('/img/arrows.png') no-repeat;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
}
.arrowTransformpc {
  z-index: 9;
  animation: bounce-inSS 2s infinite; /* 启动动画特效 */
  width: 24px;
  height: 32px;
  background: url('/img/arrows.png') no-repeat;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 180px;
  text-align: center;
}
/* 箭头动画 */
@keyframes bounce-inSS {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
</style>

最后将页面优化的更优雅 动画箭头指引