一、vue集成flexible方案

先介紹幾個基本的概念

• px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
• em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。
• rem是CSS3新增的一個相對單位（root em，根em）

在進(jìn)行網(wǎng)頁設(shè)計的時候由于屏幕大小并不是一定的，所以需要考慮到許多尺寸方面的因素，以上三種單位均是常會用到的單位，對他們有一定理解后可以使我們設(shè)計出來的網(wǎng)頁組件與組件之間契合度更高，展示出來更好看。關(guān)于這三種尺寸我就不過多介紹了大家可以去菜鳥教程上查閱傳送門

第一種：在編譯的時候自動轉(zhuǎn)換(px2rem-loader)

這種方法大概的操作是這樣的：

①安裝flexible.js

npm install lib-flexible --save

②安裝px2rem-loader

npm install px2rem-loader --save-dev

③配置px2rem-loader

將以下代碼放在build/utils.js中

exports.cssLoaders = function (options) {
  options = options || {}
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoaders:15
    }
  }
//增加代碼，px轉(zhuǎn)rem配置
const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
          //每一rem大小為72px
          remUnit: 72 //根據(jù)視覺稿，rem為px的十分之一，720寬度px 72rem
      }
}
function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader]
}

大概流程就是這樣的，在這里介紹的還是比較含糊的，如果大家需要用到這種方案可以在網(wǎng)上進(jìn)一步進(jìn)行檢索，今天主要介紹的是第二種cssrem插件。

第二種：直接在寫css樣式的時候轉(zhuǎn)換(cssrem)

這種方案只需安裝上插件，在寫代碼的時候就可以直接進(jìn)行轉(zhuǎn)換；當(dāng)然使用之前也需要進(jìn)行簡單的配置，否則會出一些意想不到的錯誤。安裝及配置插件往下看

這種方法使用于vscode，對于webstorm等集成開發(fā)環(huán)境我并不確定有沒有。

二、安裝&配置lib-flexible.js

flexible.js是淘寶開發(fā)出的一個用來適配移動端的js框架。淘寶框架的核心原理就是根據(jù)制不同的width給網(wǎng)頁中html根節(jié)點設(shè)置不同的font-size，然后所有的px都用rem來代替，這樣就實現(xiàn)了不同大小的屏幕都適應(yīng)相同的樣式了。其實它就是一個終端設(shè)備適配的解決方案，也就是說它可以讓你在不同的終端設(shè)備中實現(xiàn)頁面適配。頁面內(nèi)的組件大小會隨著窗口的大小進(jìn)行改變。

安裝flexible

npm install lib-flexible --save

配置flexible

找到vue-cli路徑node_modules/lib-flexible/flexible.js，然后修改rem換算單位

這里的是一個計量單位（咱們會將1rem=80px為換算單位）

所以這里的/10要改為/24，因為24*80px=1920px，大家可以根據(jù)自己的需要進(jìn)行劃分

至此，flexible.js已經(jīng)配置好了，只需要在寫css的時候?qū)x換為rem為單位即可。接下里就配置cssrem，通俗的來說cssrem有點像物理外掛，hhhh。

安裝cssrem之前先看看效果圖，下面的測試是有css樣式邊框的，從邊框的改變可以看出dom元素確實是進(jìn)行了適配。

效果圖（全屏）：

三、安裝插件cssrem

cssrem全稱 ：px to rem & rpx & vw (cssrem)不過在vscode插件商店搜索cssrem還是可以找到它的，安裝之后稍微進(jìn)行一下配置，按照下面步驟來就好了：

①安裝

②計量單位統(tǒng)一

大工告成?。?！

至此就可以很方便的進(jìn)行屏幕適配了。如果有不懂的地方或者有更好的想法歡迎評論區(qū)留言。

接下來就使用vue對pink老師大屏可視化項目進(jìn)行復(fù)現(xiàn)。

到此這篇關(guān)于Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解的文章就介紹到這了,更多相關(guān)Vue flexible.js+rem適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論