vue实现屏幕适配，自适应不同系统的分辨率

Vue实现屏幕适配并自适应不同系统分辨率的方式有很多种，以下是其中一种常用的方法：

1. 使用flexible.js来设置根元素的字体大小，从而实现rem布局，具体步骤如下：

(1) 首先在项目中引入flexible.js文件；

(2) 在index.html文件中设置meta标签，如下所示：

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

(3) 在main.js文件中引入flexible.js，并设置根元素的字体大小，如下所示：

   import 'lib-flexible/flexible.js'

2. 使用CSS3的媒体查询来根据不同的屏幕宽度设置不同的样式，具体步骤如下：

(1) 在样式表中使用@media查询，如下所示：

   @media screen and (max-width: 768px) {
       /* 在屏幕宽度小于等于768px时应用的样式 */
   }
   
   @media screen and (min-width: 769px) and (max-width: 1024px) {
       /* 在屏幕宽度在769px到1024px之间时应用的样式 */
   }
   
   @media screen and (min-width: 1025px) {
       /* 在屏幕宽度大于等于1025px时应用的样式 */
   }

(2) 根据不同的屏幕宽度设置不同的样式，例如设置不同的字体大小、行高、间距、边距等。

以上是一种常用的Vue实现屏幕适配并自适应不同系统分辨率的方法，但实际上还有很多其他的方法，具体应该根据项目需求来选择。