Vue实现PC端适配

Vue实现PC端适配，通常有以下几种方式。

• amfe-flexible联合postcss-plugin-px2rem

• postcss-px-to-viewport

• CSS媒体查询

• 使用transfrom:scale()属性

• 动态样式绑定

前两种方式在在移动端使用amfe-flexible和postcss-plugin-px2rem做适配，移动端适配之postcss-px-to-viewport两节里有详细介绍过，在此就不再介绍了。

在使用amfe-flexible联合postcss-plugin-px2rem时需要注意一下：

在vue.config.js里的rootValue为了方便，改成80, 设计UI是根据1920的宽度设计的。

那么在amfe-flexible/index.js里，将这里的10改成24。 其它无需修改。

下面分别介绍一下css媒体查询和transform:scale方法。

01

CSS 媒体查询

思路：

根据PC的分辨率的不同，对文件分别赋予不同的class。

实现：

1. 创建全局css文件：styles.css，内容如下：

一般情况下，我们会把PC端和移动端做成两套项目实现，毕竟移动端的交互更炫酷，实现更复杂一些。所以第三条针对移动端的样式可忽略。

2. 在App.vue里引入全局样式

02

动态样式绑定

思路：

在需要适配的组件中，根据不同的分辨率，动态绑定样式或者分配不同的class来实现适配。

实现：

通过监听窗口的大小变化来实时监听设备的分辨率，并根据不同的分辨率更新样式isDesktop、isTablet 和 isMobile 数据属性。

03

CSS transform:scale()结合JS

思路：

利用CSS中的transform.scale()属性，根据分辨率的不同进行整体的缩放，以达到适配的目的。

实现：

设计稿的尺寸为1920 X 1080 px。在App.vue里添加如下代码：

这里的#screen的定位以及transform-origin都是为了让页面始终保持居中。若未设置transform-origin属性，那么缩放将围绕元素的中心点进行操作。会出现如下的问题：

使用transform-origin前：

使用transform-origin后：