通过js动态设置字体大小

function setRem() {

var uiW = 375;

// 获取屏幕的宽度

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

// 通过js动态改变html根节点字体大小

var html = document.getElementsByTagName('html')[0];

html.style.fontSize = (clientWidth/uiW)*10 +'px';

}

// window.onresize 浏览器被重置大小执行事件

window.onresize = setRem;

</script>

根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小
根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变

通过js动态设置字体大小相关推荐

js动态设置文字大小
js动态设置文字大小 <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.docu ...
pyqt5动态设置字体大小
利用QFontDialog组件的getFont()方法进行字体的设置下面是使用工具栏按钮绑定设置字体的方法进行界面字体设置,设置完成后并进行本地化保存,界面重启时进行加载利用下面的方式进行工具栏按 ...
移动端应该如何动态设置字体大小？
rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在 ...
通过JavaScript动态设置字体大小
<script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.documentElement ...
vue3+element-plus动态设置字体大小
1.先定义一个字体数据 setup() {const state = reactive({size: 1, //默认字体大小值val: "",//双向绑定的值//字体数组posts ...
iOS模仿微信滑块动态设置字体大小的功能
首先说一下实现这一功能的核心类别,UITableViewCell+FSAutoCountHeight.这个类其实是利用运行时将每个cell高度通过子控件的约束动态加以控制进而返回一个值,这个值就是我们 ...
Android 代码中动态设置字体大小-TextView.SetTextSize()
关键代码 - setTextSize(TypedValue.COMPLEX_UNIT_PX,15); //15像素 - setTextSize(TypedValue.COMPLEX_UNIT_SP,1 ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
根据屏幕大小动态设置字体rem
//根据屏幕大小动态设置字体rem var docEl = document.documentElement,//当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时,//注意现在当浏览器 ...
WPF中GDI+图形图像的绘制：（一）绘制文本——动态设置字体、大小、颜色
GDI+(Graphics Device Interface Plus图形设备接口加)是.NET框架的重要组成部分,负责在屏幕和打印机上绘制图形图像和显示信息.GDI+不但在功能上比GDI 要强大很多 ...

通过js动态设置字体大小

通过js动态设置字体大小相关推荐

最新文章

热门文章