Vue flexible是一種基于Vue的響應(yīng)式布局方案，它可以根據(jù)不同屏幕進(jìn)行自適應(yīng)布局，適用于移動(dòng)端和PC端的開發(fā)中。它的核心原理是通過rem單位將設(shè)計(jì)稿的尺寸轉(zhuǎn)換為不同屏幕的相對(duì)尺寸，從而實(shí)現(xiàn)自適應(yīng)布局。

在使用Vue flexible之前，我們需要先安裝它的依賴：flexible和px2rem-loader。在webpack.config.js中添加px2rem-loader的配置：

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'px2rem-loader',
options: {
remUnit: 75 // 1rem = 75px
}
}
]
}
]
}
}

我們也可以在main.js中引入flexible：

import 'lib-flexible/flexible.js'

現(xiàn)在我們可以開始在Vue中使用rem單位進(jìn)行布局了。例如，我們想讓某一個(gè)div在不同屏幕中寬度自適應(yīng)，我們可以這樣寫：

<div class="box"></div>
<style>
.box {
width: 10rem; /* 在設(shè)計(jì)稿中的寬度為750px */
}
</style>

現(xiàn)在，當(dāng)屏幕寬度為375px時(shí)，box的寬度就是5rem。當(dāng)屏幕寬度為414px時(shí)，box的寬度就是5.52rem。通過rem單位，我們可以實(shí)現(xiàn)不同屏幕之間的自適應(yīng)布局。

Vue flexible還提供了一些其他的功能，如根據(jù)不同的屏幕像素密度進(jìn)行判斷，給不同的設(shè)備添加不同的字體大小，以便在高密度屏幕上顯示效果更好。在使用Vue flexible時(shí)，我們還要注意一些細(xì)節(jié)問題，如不能在rem單位中使用浮點(diǎn)數(shù)，避免出現(xiàn)一些布局問題。