直播软件开发,通过js动态设置字体大小
直播软件开发,通过js动态设置字体大小实现的相关代码
1 | <!DOCTYPE html><br><html><br> <br><head><br> <meta charset= "UTF-8" ><br> <meta http-equiv= "X-UA-Compatible" content= "IE=edge" ><br> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" ><br> <title>rem相对根节点</title><br> <br> <style><br> /* rem是相对于根节点html的font-size值<br> <br> */ <br> html {<br> font-size: 100px;<br> }<br> <br> div {<br> /* 16像素 */ <br> font-size: .16rem;<br> }<br> <br> h1 {<br> /* 20像素 */ <br> font-size: .2rem;<br> }<br> </style><br></head><br> <br><body><br> <div><br> 哈哈,我是div元素<br> <h1>我是div的儿子h1</h1><br> </div><br></body><br> <br> <br> 通过下面的js设置<br> 下次试用只要下面的<br> <br> <br><script><br> function setRem() {<br> var ui_w = 375 ;<br> // 获取屏幕的宽度<br> var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;<br> console.log(ui_w,clientWidth);<br> <br> // 通过js动态改变html根节点字体大小<br> var html_ = document.getElementsByTagName('html')[0];<br> html_.style.fontSize = (clientWidth/ui_w)*100 +'px';<br> }<br> // window.onresize 浏览器被重置大小执行事件<br> window.onresize = setRem;<br> <br> <br></script><br> <br></html> |
以上就是 直播软件开发,通过js动态设置字体大小实现的相关代码,更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现