區分手機端和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" />');