ai等比例缩放工具 PC端 VUE 官网项目前端开发响应式布局（宽+高等比例缩放）

默认分类1年前 (2023)发布 admin

5,022 0 0

背景

最近开发了3个门户网站，一般程序员都会有显示器，一开始我使用的是flex响应式 + 宽度百分比去进行适配，但是开发完之后发现在显示器上看着正常，但是到了笔记本上就发现宽度是自适应了，但是高度并没有随着宽度去等比例缩小，就显得页面很别扭，所以我就查了很多文章，一个一个去试，下面来总结一下，方便以后去开发：

方案安装依赖

npm install postcss-px2rem px2rem-loader --save
npm i lib-flexible --save

1、vue-cli2 项目引入依赖：

import 'lib-flexible'

px转换成rem

vue-的和其他样式文件最终是都是由build/utils.js里的方法生成的，我们只需在后再加上一个即可，-的选项意思是 1rem=多少像素，结合lib-的方案，我们将的.设置成设计稿宽度的1/10，这里假设设计稿宽为

//utils.js
const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

// //utils.js
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

ai等比例缩放工具 PC端 VUE 官网项目前端开发响应式布局（宽+高等比例缩放）

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

2、vue-cli3 项目

// 更改refreshRem函数
function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

import "@/utils/flexible";

// // 引入等比适配插件
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
  //配置rem基准值 基准大小 baseSize，需要和rem.js中相同
  remUnit: 192, // 设计稿尺寸1920/10
});
module.exports = {
 chainWebpack: (config) => {
     config.module
    .rule("css")
    .test(/.css$/)
    .oneOf("vue")
    .use("px2rem-loader")
    .loader("px2rem-loader")
    .options({
      remUnit: 192,
      remPrecision: 8,
    })
    .end();
 },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      },
    },
  },
}

3、备用方案

由于我开发的时候第一次没有发现cli2 和 cli3 的区别，是修改文件的时候才发现的（自己项目是cli3），所以会有两个步骤结合的情况，后来因为项目着急也没有去删除一些没用的去验证哪个需要哪个不需要，所以后来我就又找了找，看有没有准确的，发现很多文章都是乱的，凭自己的判断在这里提供一个看上去可行的（cli3）：

安装 -及-

npm install postcss-px2rem px2rem-loader --save

在根目录src中新建utils目录下新建rem.js等比适配文件

ai等比例缩放工具 PC端 VUE 官网项目前端开发响应式布局（宽+高等比例缩放）

 
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js中引入适配文件

import './utils/rem.js'

到vue..js中配置插件

 
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
 
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
 
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}