动态设置html的font-size值
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值的更多相关文章
- android 静态和动态设置 Receiver的 android:enabled值
0x 01 前提约束: 0x001 静态检查:指用action限定Intent,并使用包管理器的queryBroadCastReceivers方法,在flags字段置为0时查找ResolveInfo, ...
- layui 时间插件laydate中动态设置改变min和max值
<div class="layui-inline"> <label class="layui-form-label">申请时间</ ...
- Ext.form.Label组件动态设置html值
解决方法: (1)用的是 Ext.getCmp(id).setText('XXXX')可以动态设置label 显示的文本值,但是文本中有个别数字需要改变颜色显示,需要加样式,这种方法会把加样式的标签( ...
- java反射获取和设置实体类的属性值 递归所有父类
最近做一个通用数据操作接口,需要动态获取和设置实体类的属性值,为了通用实体做了多重继承,开始网上找到代码都不支持父类操作,只能自己搞一个工具类了,此工具类可以设置和获取所有父类属性,代码贴下面拿走不谢 ...
- C#中的PropertyGrid绑定对象,通过改变某一值而动态设置部分属性的特性
问题:如下,我定义了一个对象,默认设置属性WindowSize ,WindowSize 为不可见,通过改变SaveOnClose的值,动态的改变不可见的属性的显示和隐藏. [DefaultProper ...
- gridcontrol如何根据值来动态设置某一行的颜色
应用场景:当我们使用devexpress gridcontrol wpf控件时.可要会要根据这一行要显示的值来设置相应的颜色 可以通过下面方法来实现 一.先定义一个style <local:Co ...
- postman提取接口的返回值及动态设置变量(一)
一.提取接口返回值 1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
- 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中<meta-data>变量的值
转载请说明来源: http://www.cnblogs.com/lizhilin2016/p/7390079.html 最近lz 在开始做一个新的Demo, 在项目中集成了bugly用于收集项目中的崩 ...
- 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中<meta-data>变量的值
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客 你也能够查看我的其它同类文章.也会让你有一定的 ...
随机推荐
- docker修改系统时间总结
最近弄docker烦躁的一笔,时区问题踩了不少坑,为了以后再遇到类似问题再花时间查资料,特记录一下... Ubuntu: echo "Asia/Shanghai" > /et ...
- 【洛谷5335】[THUSC2016] 补退选(指针实现Trie)
点此看题面 大致题意: 三种操作:加入一个字符串,删除一个字符串,求最早什么时候以某个字符串为前缀的字符串个数超过给定值. \(Trie\) 这道题显然是\(Trie\)的暴力裸题. 考虑我们对于\( ...
- 【OCR系列之一】字符识别技术总览
最近入坑研究OCR,看了比较多关于OCR的资料,对OCR的前世今生也有了一个比较清晰的了解.所以想写一篇关于OCR技术的综述,对OCR相关的知识点都好好总结一遍,以加深个人理解. 什么是OCR? OC ...
- 解决root用户下都无权限操作的问题
问题现象: 有时系统设置了一种文件,无法编辑其所有权 sudo chown users:username {filename} 或者root用户下执行 chown users:username {f ...
- elasticsearch 索引的使用(配合haystack)
1,# 从仓库拉取镜像$ sudo docker image pull delron/elasticsearch-ik:2.4.6-1.02,下载elasticsearc-2.4.6目录拷贝到home ...
- 从零开始学 ASP.NET Core 与 EntityFramework Core 目录
从零开始学 ASP.NET Core 与 EntityFramework Core 介绍 我是一个目录,它旨在帮助开发者循序渐进的了解 ASP.NET Core 和 Entity Framework ...
- 【linux】linux命令lsof和grep命令的配合使用---linux根据端口查看PID,根据PID关键字高亮显示
lsof命令,根据端口,查看进程PID lsof -i: ps命令+grep命令 --color参数,根据PID查看进程详情,高亮显示关键字 ps -ef | grep --color=always
- 【干货】SqlServer 总结几种存储过程分页的使用
就我而言写代码最烦的就是处理数据,其中之一就是分页的使用. 有的代码写多了,总结出一套适用自己的分页方法:有的查一下资料借鉴一下套用起来也达到目的. 那么小编在这里给大家总结几个方法供大家做一下参考. ...
- Java开发桌面程序学习(12)——Javafx 悬浮窗提示 tooptip
Javafx 悬浮窗提示 tooptip 鼠标悬浮在某个控件,弹出提示,效果如下: 代码: //control是某个控件 Tooltip.install(control, new Tooltip(&q ...
- 2018-8-10-win10-uwp-商业游戏-
原文:2018-8-10-win10-uwp-商业游戏- title author date CreateTime categories win10 uwp 商业游戏 lindexi 2018-08- ...