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


Posted in Javascript onAugust 03, 2020

依赖

项目基础配置使用 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

有问题欢迎指正!

以上这篇vue实现PC端分辨率适配操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
JS字符串处理实例代码
Aug 05 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 #Javascript
简单了解three.js 着色器材质
Aug 03 #Javascript
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python opencv之SIFT算法示例
2018/02/24 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
用python实现刷点击率的示例代码
2019/02/21 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
婚前协议书
2014/04/15 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
农村文化活动总结
2014/08/28 职场文书
公司保密管理制度
2015/08/04 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript