const setRemUnit = () => {
const docEl = document.documentElement;
// IPhone6下750像素来设计,实际像素375px,1rem为50px
const rem = docEl.clientWidth / 7.5;
docEl.style.fontSize = `${rem}px`;
};
const pageShowCallback = (e) => {
if (e.persisted) {
setRemUnit();
}
};
document.addEventListener('DOMContentLoaded', setRemUnit, false);
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit, false);
// reset rem unit on page show
window.addEventListener('pageshow', pageShowCallback, false);
export default setRemUnit;
 

直接引入main.js里面就好了

 大神们。如果有更好的方法,欢迎指导
 
 

vue移动端字体大小设置的更多相关文章

  1. eclipse护眼颜色和字体大小设置

    ♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preferences ...

  2. eclipse中的字体大小设置和背景色设置

    1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply

  3. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  4. fontresize 移动端的手机字体 大小设置

    这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...

  5. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  6. vue中利用scss实现整体换肤和字体大小设置

    一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...

  7. Eclipse字体大小设置

    打开Eclipse,在主界面下Window->Preferences->General->Appearance->Colors and Fonts, 然后在右边展开框Basic ...

  8. CSS字体大小设置时的参考(转)

    from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...

  9. css字体大小设置em与rem的区别

    em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如  如果我在box_text的父元素box加了一个字体大小   那么body的8px就会被box_text的父元 ...

随机推荐

  1. SwipeRefreshLayout 下拉刷新

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com ...

  2. Linux正则表达式及扩展的正则表达式

    基本正则表达式: 扩展的正则表达式:

  3. B 小雨的三角形

    题目链接:https://ac.nowcoder.com/acm/contest/949/B 思路: 一个找规律题,找到规律就很简单,只剩下代码实现了.规律:第i行去头尾剩下的数的和等于第i-1行去头 ...

  4. [LC] 70. Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  5. Tomcat源码解析-启动过程分析之主干流程

    Tomcat启动入口就在脚本startup.sh中,具体脚本可以看tomcat的源码,这个启动脚本主要用来判断环境,找到catalina.sh脚本路径,将启动参数传递给catalina.sh执行.ca ...

  6. undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决(可能是顺序问题)

    1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库   转载地址: ...

  7. node.js 和 npm/cnpm/nrm 的安装

    node.js 和 npm/cnpm/nrm 的安装 安装 node.js.去 官网 下载,下载 LTS 版本的.安装时一路点确定,不要改动任何设置. 在 git-bash 或是 cmd 下,输入 n ...

  8. <JZOJ5912>VanUSee

    挺魔的 反正我考场上想不到233333333333333 #include<cstdio> #include<cstring> #include<iostream> ...

  9. js实现数组去重怎么实现?

    方法1. 创建一个新的临时数组来保存数组中已有的元素 var a = new Array(1,2,2,2,2,5,3,2,9,5,6,3); Array.prototype.unique1 = fun ...

  10. MatterTrack Route Of Network Traffic :: Matter

    Python 1.1 基础 while语句 字符串边缘填充 列出文件夹中的指定文件类型 All Combinations For A List Of Objects Apply Operations ...