用JavaScript实现字体大小屏幕自适应

<script>window.addEventListener('resize',function(){console.log(111);// 获取当前页面的根元素let doc=document.documentElement;// 获取当前设备的视口宽度let view_width=doc.clientWidth;// 计算 font-size 的值let fontSize=view_width /15;// 设置当前的html的font-size 属性的值 doc.style.fontSize = fontSize+'px';})
</script>

封装

<script>// 封装函数window.addEventListener('resize',function(){reset_font();})function reset_font(){console.log(111);// 获取当前页面的根元素let doc=document.documentElement;// 获取当前设备的视口宽度let view_width=doc.clientWidth;// 计算 font-size 的值let fontSize=view_width /15;// 设置当前的html的font-size 属性的值 doc.style.fontSize = fontSize+'px';}
</script>

用JavaScript实现字体大小屏幕自适应相关推荐

Android字体大小怎么自适应不同分辨率？
今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的. 一. 原理如下: 假设需要适应320x240,480x320分辨率.在res ...
video 宽高自适应_HTML5/CSS/jQuery video大小屏幕自适应及获取视频宽高
今天的第一个任务,就是要让Video的大小能够满屏(适应父级div),换言之要判断高度.宽度,使之能够达到全屏的效果. 在过去的一个版本中,我们要想满屏,写了一段长长的js文件,来取高度宽度对比,之后 ...
java操作图片-一行字符串字体大小尺寸自适应
需求:java处理图片,向图片中添加文字 ,只让文字显示一行 ,不允许换行,让输入的文字,限定在图片宽度内. 解决:每次Graphics2D.setFont()后,可以通过Graphics2D.get ...
html字大小自适应,html字体大小自适应怎样让HTML字体自适应到移动端？
如何设置中的字体大小随 height变化而自 first line html如何实现字体大小的自适应字体的单位用百分比即可. html页面怎样能够自适应电脑屏幕宽度? 在1024*768或者800* ...
CSS中字体大小随屏幕大小自适应变化
1.通过媒体查询的方式 @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size: ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
根据屏幕大小自适应根字体大小
首先获取根节点 var html = doc.getElementsByTagName("html")[0], (orientationchange->手机屏幕转屏事件) ( ...
使用rem，使字体大小自适应屏幕
rem是CSS3新增的一个相对单位(root em,根em).这个单位与em区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点 ...
js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...

用JavaScript实现字体大小屏幕自适应

用JavaScript实现字体大小屏幕自适应相关推荐

最新文章

热门文章