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实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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里面的抽象类
2010/01/28 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
使用Python发现隐藏的wifi
2020/03/04 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
学习考察心得体会
2014/09/04 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技