Vue實現(xiàn)PC端適配，通常有以下幾種方式。

• amfe-flexible聯(lián)合postcss-plugin-px2rem

• postcss-px-to-viewport

• CSS媒體查詢

• 使用transfrom:scale()屬性

• 動態(tài)樣式綁定

前兩種方式在在移動端使用amfe-flexible和postcss-plugin-px2rem做適配，移動端適配之postcss-px-to-viewport兩節(jié)里有詳細(xì)介紹過，在此就不再介紹了。

在使用amfe-flexible聯(lián)合postcss-plugin-px2rem時需要注意一下：

在vue.config.js里的rootValue為了方便，改成80, 設(shè)計UI是根據(jù)1920的寬度設(shè)計的。

那么在amfe-flexible/index.js里，將這里的10改成24。?其它無需修改。

下面分別介紹一下css媒體查詢和transform:scale方法。

01

CSS 媒體查詢

思路：

根據(jù)PC的分辨率的不同，對文件分別賦予不同的class。

實現(xiàn)：

1. 創(chuàng)建全局css文件：styles.css，內(nèi)容如下：

一般情況下，我們會把PC端和移動端做成兩套項目實現(xiàn)，畢竟移動端的交互更炫酷，實現(xiàn)更復(fù)雜一些。所以第三條針對移動端的樣式可忽略。

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

02

動態(tài)樣式綁定

思路：

在需要適配的組件中，根據(jù)不同的分辨率，動態(tài)綁定樣式或者分配不同的class來實現(xiàn)適配。

實現(xiàn)：

通過監(jiān)聽窗口的大小變化來實時監(jiān)聽設(shè)備的分辨率，并根據(jù)不同的分辨率更新樣式isDesktop、isTablet 和 isMobile 數(shù)據(jù)屬性。

03

CSS transform:scale()結(jié)合JS

思路：

利用CSS中的transform.scale()屬性，根據(jù)分辨率的不同進(jìn)行整體的縮放，以達(dá)到適配的目的。

實現(xiàn)：

設(shè)計稿的尺寸為1920 X 1080 px。在App.vue里添加如下代碼：

這里的#screen的定位以及transform-origin都是為了讓頁面始終保持居中。若未設(shè)置transform-origin屬性，那么縮放將圍繞元素的中心點進(jìn)行操作。會出現(xiàn)如下的問題：

使用transform-origin前：

使用transform-origin后：