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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js字符编码函数区别分析
Dec 28 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP 数组基础知识小结
2010/08/20 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
Google Maps API地图应用示例分享
2014/10/23 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
Python实现的检测网站挂马程序
2014/11/30 Python
简单解析Django框架中的表单验证
2015/07/17 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python @property的用法及含义全面解析
2018/02/01 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
strstr()的简单实现
2013/09/26 面试题
医院安全生产月活动总结
2014/07/05 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2014年残联工作总结
2014/11/21 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang