动态设置html字号,动态设置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); //移动端

})();

移动端也可以通用使用：font-size:3rem

动态设置html字号,动态设置html的font-size值（适配文字大小）相关推荐

ios 代码设置控件宽高比_iOS--利用比例纯代码适配屏幕大小
首先说下让自己的程序支持iPhone6和6+,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述:第二种方法是和之前iPhone5的类似,比较简单,为iPho ...
织梦html仅动态,dede织梦系统后台发布文章时设置为默认动态浏览的方法
织梦访问量不大,为了方便,所以全动态除了系统设置,"核心设置"-是否使用伪静态, dede默认添加项目.发布文章时,会有选项"生成HTML""仅动态 ...
电脑ip地址设置_路由器动态IP和静态IP上网方式怎么设置【设置教程】
在我们设置路由器的过程中,路由器设置界面一般会给我们提供4种上网方式选项,分别是:"让路由器自动选择上网方式(推荐)"."PPPoE(ADSL虚拟拨号)".&q ...
Android 动态创建控件并设置控件的大小之Android屏幕适配攻略（五）
Android 屏幕适配攻略(五)动态创建控件并设置控件的大小题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析视频 ...
wr885n虚拟服务器设置,动态IP设置：选择动态IP(以太网宽带
tplink885n设置操作步骤如下一台新购买(恢复出厂设置)的TL-WR885N路由器,要实现上网功能,需要进行下面3个步骤 :1.TL-WR885N路由器安装;2.设置电脑IP地址;3.TL-W ...
android系统设置动态壁纸,安卓教程：设置GIF动图为手机壁纸
不禁是一把泪,连设置GIF动态图为壁纸都可以做成教程了,小编你是有多缺文章素材啊?嗯,即便如此,在Android平台上,可是有很多同学为图动不动的问题而苦恼.所以,这篇教程就出来了. 前言:实现GIF ...
通过js动态创建标签，并设置属性
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
JAVA导出Excel通用工具类——第一篇：详细介绍POI 导出excel的多种复杂情况，包括动态设置筛选、动态合并横向（纵向）单元格等多种复杂情况——保姆级别，真的不能再详细了，代码拿来即用）
JAVA导出Excel通用工具--第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选.动态合并横向(纵向)单元格等多种复杂情况--保姆级别,真的不能再详细了,封装通用工具类,代码拿 ...
如何将html格式的转换成动态壁纸,如何将gif格式设置为手机动态壁纸？
1. 我们将动态壁纸的格式设置为gif,但是gif格式的不能直接设置为壁纸. 我们需要使用的工具是AnimGIF Live Wallpaper 2 lite,然后在图库中将其打开. 要将设置为动态壁纸 ...

动态设置html字号,动态设置html的font-size值（适配文字大小）

动态设置html字号,动态设置html的font-size值（适配文字大小）相关推荐

最新文章

热门文章

动态设置html字号,动态设置html的font-size值 （适配文字大小）

动态设置html字号,动态设置html的font-size值 （适配文字大小）相关推荐

最新文章

热门文章

动态设置html字号,动态设置html的font-size值（适配文字大小）

动态设置html字号,动态设置html的font-size值（适配文字大小）相关推荐