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 相关文章推荐
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
详解Python中的各种函数的使用
2015/05/24 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
在python image 中实现安装中文字体
2020/05/16 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
2014会计年终工作总结
2014/12/20 职场文书
三峡导游词
2015/01/31 职场文书
党员个人总结自评
2015/02/14 职场文书
教育读书笔记
2015/07/02 职场文书
英文投诉信格式
2015/07/03 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python