快捷導(dǎo)航

Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解

更新時(shí)間：2023年01月07日 11:04:51 作者：酷爾。

這篇文章主要介紹了Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、vue集成flexible方案

先介紹幾個(gè)基本的概念

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

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

第一種：在編譯的時(shí)候自動(dòng)轉(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樣式的時(shí)候轉(zhuǎn)換(cssrem)

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

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

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

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

安裝flexible

npm install lib-flexible --save

配置flexible

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

這里的是一個(gè)計(jì)量單位（咱們會(huì)將1rem=80px為換算單位）

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

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

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

效果圖（全屏）：

三、安裝插件cssrem

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

①安裝

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

大工告成?。?！

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

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

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

您可能感興趣的文章: