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 相关文章推荐
javascript学习之闭包分析
Dec 02 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
详解如何运行vue项目
Apr 15 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
JS实现按比例缩小图片宽高
Aug 24 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
中国收音机工业发展史
2021/03/02 无线电
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python匿名函数用法实例分析
2019/08/03 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python小白学习包管理器pip安装
2020/06/09 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
最美乡村医生事迹材料
2014/06/02 职场文书
四年级小学生评语
2014/12/26 职场文书
亮剑观后感600字
2015/06/05 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS