vue实现PC端分辨率适配操作

作者:韩大璐 时间:2024-05-09 09:29:57 

依赖

项目基础配置使用 vue-cli 生成

自适应方案核心: 阿里可伸缩布局方案 lib-flexible

px转rem:px2rem,它有webpack的loader px2rem

开始

先使用vue脚手架初始化一个webpack项目

vue init webpack 项目名

项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

// main.js

import 'lib-flexible'

vue实现PC端分辨率适配操作

接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成:


<template>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</template>

<style>
* {
margin: 0;
padding: 0;
}
</style>

<style scoped>
.wrapper div {
height: 1rem;
}
.box1 {
width: 2rem;
background-color: coral;
}
.box2 {
width: 4rem;
background-color: skyblue;
}
.box3 {
width: 6rem;
background-color: palegreen;
}
.box4 {
width: 8rem;
background-color: wheat;
}
.box5 {
width: 10rem;
background-color: darkred;
}
</style>

vue实现PC端分辨率适配操作

但是在实际开发中,我们通过设计稿得到的单位是px,所以要将px转换成rem再进行样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了,当然,编辑器可能也要对应的插件。

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


//utils.js
const cssLoader = {
loader: 'css-loader',
options: {
 sourceMap: options.sourceMap
}
}

const px2remLoader = {
loader: 'px2rem-loader',
options: {
 remUnit: 192
}
}
//...

放进loaders数组中


//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
 })
 })
}
//...

修改配置以后重启服务器,将原来app.vue文件中的样式改成:


<style scoped>
.wrapper div {
height: 1rem;
}
.box1 {
/* 750 * 20% */
width: 150px;
background-color: coral;
}
.box2 {
/* 750 * 40% */
width: 300px;
background-color: skyblue;
}
.box3 {
/* 750 * 60% */
width: 450px;
background-color: palegreen;
}
.box4 {
/* 750 * 80% */
width: 600px;
background-color: wheat;
}
.box5 {
/* 750 * 100% */
width: 750px;
background-color: darkred;
}
</style>

可以看到,适配依然生效。

以上是vue-cli2配置px2rem的方式,

如果脚手架用的是vue-cli3的话,由于vue-cli3 生成的目录结构没有build文件,所以在配置上也有一些不同。

vue-cli3配置方式:

找到文件 node_modules/@vue/cli-service/lib/config/css.js,添加规则:


config.module
 .rule('css')
 .test(/\.css$/)
 .oneOf('vue')
 .resourceQuery(/\?vue/)
 .use('px2rem')
 .loader('px2rem-loader')
 .options({
  remUnit: 75
 })

vue实现PC端分辨率适配操作

remUnit的值请自行修改。

但是有一个问题,我明明设置的宽度是按1920来的,为什么计算出来1rem=54px?

vue实现PC端分辨率适配操作

是不是插件哪里出了问题,或者在哪里定义过跟54或者540相关的东西?

(我这里全局搜索了54找到flexible.js文件)

找到flexible.js文件看下:

vue实现PC端分辨率适配操作

找到问题了就解决问题,既然文件把屏幕宽度写死了,那就不写死:


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;
}

现在再重启项目,看一下运行结果:

vue实现PC端分辨率适配操作

end

有问题欢迎指正!

来源:https://blog.csdn.net/weixin_41257563/article/details/97266234

标签:vue,PC端,分辨率
0
投稿

猜你喜欢

  • python 自动批量打开网页的示例

    2021-04-16 00:35:51
  • Access 导入到SQL Server 2005的方法小结

    2024-01-15 12:02:01
  • 全国哀悼日 建议站点换素装(附代码)

    2008-05-19 12:05:00
  • python文件操作的基础详细讲解(write、read、readlines、readline)

    2021-04-05 19:31:44
  • BootStrap学习笔记之nav导航栏和面包屑导航

    2023-08-16 12:33:22
  • python热力图实现简单方法

    2023-10-28 06:14:41
  • Python使用sklearn实现的各种回归算法示例

    2021-02-18 10:00:55
  • 基于Mysql+JavaSwing的超市商品管理系统设计与实现

    2024-01-29 00:31:46
  • js Canvas实现的日历时钟案例分享

    2024-04-22 13:08:26
  • 使用Go实现优雅重启服务功能

    2024-04-25 15:06:06
  • mysql 存储过程中变量的定义与赋值操作

    2024-01-22 18:44:55
  • MySQL InnoDB 二级索引的排序示例详解

    2024-01-15 17:11:53
  • JavaScript数组及非数组对象的深浅克隆详解原理

    2024-04-19 09:52:51
  • Asp Oracle存储过程返回结果集的代码

    2011-04-10 11:16:00
  • ASP-server.URLEncode反函数:urldecode

    2008-10-23 16:05:00
  • vue操作dom元素的3种方法示例

    2024-04-28 09:31:05
  • MySQL外键设置的方法实例

    2024-01-19 14:10:42
  • Anaconda修改默认虚拟环境安装位置的方案分享

    2022-11-19 22:36:52
  • Python Django2 model 查询介绍(条件、范围、模糊查询)

    2023-11-02 15:32:09
  • 如何使用Cython对python代码进行加密

    2023-07-21 19:33:40
  • asp之家 网络编程 m.aspxhome.com