区分手机端和pc端加载不同的样式

1.vue同个css文件

<div :class="isMobile ? 'backgroudImgMobile' : 'backgroudImgPc'">

  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    this.getScreen();
  },

  methods: {
    getScreen() {
      if (
        navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      ) {
        this.isMobile = true;
        console.log("手机");
      } else {
        this.isMobile = false;
        console.log("pc");
      }
    }
  }

第二种：加载不同的css文件，在getScreen方法写入该句

 document.write('<link href="css/phone.css" rel="stylesheet" type="text/css" media="screen" />');