vue项目中使用rem,在入口文件添加内容操作


Posted in Javascript onNovember 11, 2020

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:

<script>
   window.onload = function () {
  var setRem = function () {
    // UI设计稿的宽度
    var uiWidth = 1200;

    // 移动端屏幕宽度
    var winWidth = document.documentElement.clientWidth;

    // 比率
    var rate = winWidth / uiWidth;

    // 设置html元素的字体大小
    document.documentElement.style.fontSize = rate * 20 + "px"
  };

  setRem();

  window.onresize = function () {
    setRem();
  }
}
</script>

然后在写css就可以将px单位换成rem.

这里设置的比例是20px=1rem,

例如:宽度为100px时,可以直接写成5rem

(function (doc, win) {
  let fn = () => {
   let docEl = doc.documentElement,
    clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
  }
  if (!doc.addEventListener) return;
  win.addEventListener('resize', fn);
  doc.addEventListener('DOMContentLoaded', fn);
 })(document, window);

补充知识:vue 中使用 rem 布局的两种方法

在使用 vue-cli 开发 H5 项目时,需要进行 rem 适配,下面提供两种常用的方法(以 750 设计稿为例),希望对大家有所帮助。

方法一:在 index.html 或者 main.js 中添加以下代码:

const setHtmlFontSize = () => {
 const htmlDom = document.getElementsByTagName('html')[0];
 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
 if (htmlWidth >= 750) {
  htmlWidth = 750;
 }
 if (htmlWidth <= 320) {
  htmlWidth = 320;
 }
 htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();

注: 这里设置的比例是 100px = 1rem,例如:元素宽度为 100px 时,可以直接写成 1rem

方法二:使用 lib-flexible 和 px2rem-loader 自动转换

1、安装插件

npm install lib-flexible --save

npm install px2rem-loader --save-dev

2、配置插件

在入口文件 main.js 中引入 lib-flexible:

vue项目中使用rem,在入口文件添加内容操作

在 build/utils.js 文件中配置 px2rem-loader:

vue项目中使用rem,在入口文件添加内容操作

安装并配置好 lib-flexible 和 px2rem 之后要重启一下项目,才能自动把 px 转换成 rem。

内联的 px 样式不能自动转换。

另外,px 写法上会有些不同,大家可以参考 px2rem 官方介绍,下面简单介绍一下。

1. 直接写 px,编译后会直接转化成 rem;---- 【除下面两种情况,其他长度用这个】

2. 在 px 后面添加 /*no*/,不会转化 px,会原样输出; ---- 【一般 border 用这个】

3. 在 px 后面添加 /*px*/,会根据 dpr 的不同,生成三套代码。---- 【一般 font-size 用这个】

示例代码如下:

/* 编译前 */
.selector {
  width: 150px;
  height: 64px; /*px*/
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/
}

/* 编译后 */
.selector {
  width: 2rem;
  border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
  height: 32px;
  font-size: 14px;
}
[data-dpr="2"] .selector {
  height: 64px;
  font-size: 28px;
}
[data-dpr="3"] .selector {
  height: 96px;
  font-size: 42px;
}

以上这篇vue项目中使用rem,在入口文件添加内容操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 #Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 #Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
You might like
小文件php+SQLite存储方案
2010/09/04 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python的exec、eval使用分析
2017/12/11 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python命令行click参数用法解析
2019/12/19 Python
python中四舍五入的正确打开方式
2021/01/18 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
公司委托书格式范文
2014/04/04 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
护士旷工检讨书
2015/08/15 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python