vue项目适配pc端的各种屏幕分辨率

·  阅读 984
vue项目适配pc端的各种屏幕分辨率

这是我参与11月更文挑战的第6天,活动详情查看:2021最后一次更文挑战

vue项目适配pc端的各种屏幕分辨率

在pc项目开发的时候,要适用PC端的各种屏幕分辨率,而且移动端的时候也是需要适配各种各样的分辨率,现在就给大家介绍一个办法就是使用lib-flexiblepx2rem-loader这两个来进行操作适配。lib-flexible是淘宝开发的一个适配的插件,开源适合广大开发者使用。px2rem-loader是使用了rem的单位来对页面使用,但是针对于字体的单位还是需要使用px单位。

下面就是我们的基本炒作和一些配置的修改

1.先安装插件

npm install px2rem-loader
npm install lib-flexible
复制代码

2.在build文件下的utils.js文件下,添加

//1
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192
      //一个rem==192px
    }
  }
//2
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
复制代码

如下

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192
      //一个rem==192px
    }
  }
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]//加上px2remLoader

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}
复制代码

3.在main.js中引入lib-flexible

import 'lib-flexible'
复制代码

4.找到node_modules下的lib-flexible的lib-flexible.js,修改

54改成width
 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 54 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    改成
     function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
复制代码

5.安装了这个的插件之后,有可能会导致之前的一些css样式发现变化。ui页面直接变形,所以要注意

方法有很多种,也可以使用Bootstrap组件库的自适应的功能,但是就是毕竟麻烦,需要一点点去调。官网地址:www.bootcss.com/

还是就是ElementUI的组件库也是可以的,官网地址:element.eleme.cn/#/zh-CN

分类:
前端
标签:
分类:
前端
标签: