vue2.x大屏适配原稿适配

hero__H

于 2022-01-11 16:44:04 发布

阅读量443

点赞数

分类专栏： Vue 文章标签： vue.js javascript css

本文链接：https://blog.youkuaiyun.com/weixin_42036591/article/details/122436112

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 npm 安装 px2rem-loader 和 lib-flexible，并配置 rem 单位转换及适配方案。通过具体代码展示了如何设置 px2rem-loader 的选项以实现不同设备屏幕尺寸下的像素到 rem 的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install px2rem-loader -s
npm install lib-flexible -s
build下utils新增

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,
      exclude: "/node_modules|element-ui" // 忽略文件夹
    }
  }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

main

import 'lib-flexible/flexible'

node_modules/lib-flexible/flexible.js

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