PC端

(function () {
function setRootFontSize() {
let rem, rootWidth;
let rootHtml = document.documentElement;
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
// 19.2 = 设计图尺寸宽 / 100( 设计图的rem = 100 )
rem = rootWidth / 19.2;
// 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
})();

移动端

 (function () {
function setRootFontSize() {
let dpr, rem, scale, rootWidth;
let rootHtml = document.documentElement; dpr = window.devicePixelRatio || 1; //移动端必须设置
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100(设计图的rem = 100)
scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果 (移动端添加)
let vp = document.querySelector('meta[name="viewport"]');
vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

相关文档: http://www.aliued.com/?p=3166

动态设置html的font-size值的更多相关文章

  1. android 静态和动态设置 Receiver的 android:enabled值

    0x 01 前提约束: 0x001 静态检查:指用action限定Intent,并使用包管理器的queryBroadCastReceivers方法,在flags字段置为0时查找ResolveInfo, ...

  2. layui 时间插件laydate中动态设置改变min和max值

    <div class="layui-inline"> <label class="layui-form-label">申请时间</ ...

  3. Ext.form.Label组件动态设置html值

    解决方法: (1)用的是 Ext.getCmp(id).setText('XXXX')可以动态设置label 显示的文本值,但是文本中有个别数字需要改变颜色显示,需要加样式,这种方法会把加样式的标签( ...

  4. java反射获取和设置实体类的属性值 递归所有父类

    最近做一个通用数据操作接口,需要动态获取和设置实体类的属性值,为了通用实体做了多重继承,开始网上找到代码都不支持父类操作,只能自己搞一个工具类了,此工具类可以设置和获取所有父类属性,代码贴下面拿走不谢 ...

  5. C#中的PropertyGrid绑定对象,通过改变某一值而动态设置部分属性的特性

    问题:如下,我定义了一个对象,默认设置属性WindowSize ,WindowSize 为不可见,通过改变SaveOnClose的值,动态的改变不可见的属性的显示和隐藏. [DefaultProper ...

  6. gridcontrol如何根据值来动态设置某一行的颜色

    应用场景:当我们使用devexpress gridcontrol wpf控件时.可要会要根据这一行要显示的值来设置相应的颜色 可以通过下面方法来实现 一.先定义一个style <local:Co ...

  7. postman提取接口的返回值及动态设置变量(一)

    一.提取接口返回值   1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...

  8. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

  9. 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中<meta-data>变量的值

    转载请说明来源: http://www.cnblogs.com/lizhilin2016/p/7390079.html 最近lz 在开始做一个新的Demo, 在项目中集成了bugly用于收集项目中的崩 ...

  10. 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中&lt;meta-data&gt;变量的值

    转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客 你也能够查看我的其它同类文章.也会让你有一定的 ...

随机推荐

  1. ACWING 95 费解的开关 解题记录

    你玩过“拉灯”游戏吗?25盏灯排成一个5x5的方形.每一个灯都有一个开关,游戏者可以改变它的状态.每一步,游戏者可以改变某一个灯的状态.游戏者改变一个灯的状态会产生连锁反应:和这个灯上下左右相邻的灯也 ...

  2. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  3. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) F2. Wrong Answer on test 233 (Hard Version) dp 数学

    F2. Wrong Answer on test 233 (Hard Version) Your program fails again. This time it gets "Wrong ...

  4. ASP.NET Core 集成测试中模拟登录用户的一种姿势

    不管哪种用户验证方式,最终都是在验证成功后设置 HttpContext.User ,后续处理环节通过 HttpContext.User 获取用户信息.如果能直接修改 HttpContext.User ...

  5. php array()和[]

    比较数组 array() 和 [] 执行结果:(其中之一) array() : 执行时间在0.015-0.55之间 [] : 执行时间在0.015-0.35之间 结论: []执行时间更少更稳定

  6. 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 4

    2.4  PHP的发展 最初创建时,PHP是一个简单的用Perl语言编写的程序,只是为了统计自己的网站有多少访问者.后来又用C语言重新编写,多年来,PHP经过无数开源贡献者的不断迭代,历经数个版本,已 ...

  7. MySQL基础之Natural Join用法

    Natural join即自然连接,natural join等同于inner join或inner using,其作用是将两个表中具有相同名称的列进行匹配 用https://www.w3resourc ...

  8. 利用zabbix监控ogg进程(Windows平台下)

    本文给大家介绍如何监控windows平台下的ogg程序.(注:所有操作都在administrator用户下面进行操作) 监控linux平台下的ogg程序请看:https://www.cnblogs.c ...

  9. sql server pivot

    SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[YearSalary]( [year] [int] NULL, ...

  10. XCode证书问题

    1. 确认下证书是不是开发证书,如果是发布证书就会出现这样的提示. 2. 证书失效了,去开发者中心重新生成一个. 3. 包标识符不与描述文件包含的包标识符不一致,按照它的提示换一下就好了,最好不要点 ...