Vue中使用Echarts响应式布局flexible.js+rem适配方案详解

时间:2023-02-02 酷尔。人气:0

一、vue集成flexible方案

先介绍几个基本的概念

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em）

在进行网页设计的时候由于屏幕大小并不是一定的，所以需要考虑到许多尺寸方面的因素，以上三种单位均是常会用到的单位，对他们有一定理解后可以使我们设计出来的网页组件与组件之间契合度更高，展示出来更好看。关于这三种尺寸我就不过多介绍了大家可以去菜鸟教程上查阅传送门

第一种：在编译的时候自动转换(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转rem配置
const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
          //每一rem大小为72px
          remUnit: 72 //根据视觉稿，rem为px的十分之一，720宽度px 72rem
      }
}
function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader]
}

大概流程就是这样的，在这里介绍的还是比较含糊的，如果大家需要用到这种方案可以在网上进一步进行检索，今天主要介绍的是第二种cssrem插件。

第二种：直接在写css样式的时候转换(cssrem)

这种方案只需安装上插件，在写代码的时候就可以直接进行转换；当然使用之前也需要进行简单的配置，否则会出一些意想不到的错误。安装及配置插件往下看

这种方法使用于vscode，对于webstorm等集成开发环境我并不确定有没有。

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

flexible.js是淘宝开发出的一个用来适配移动端的js框架。淘宝框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。页面内的组件大小会随着窗口的大小进行改变。

安装flexible