900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 使用rem 使字体大小自适应屏幕

使用rem 使字体大小自适应屏幕

时间:2023-06-04 00:02:29

相关推荐

使用rem 使字体大小自适应屏幕

rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em区别在于使用rem为元素设 定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

将以下代码放在入口文件,即可使字体大小自适应屏幕大小

function resize() {let doc = document.documentElement //返回文档的根节点let width = doc.clientWidth //获取浏览器窗口文档显示区域的宽度,不包括滚动条let ratio = width / 375 //将屏幕分为375份(当屏幕为375px时,ratio=1px)let fontSize = 10 * ratio //乘10,(当屏幕为375px时,fontSize=10px)if (fontSize > 20) fontSize = 20 //当屏幕为大于等于750px时,fontSize均等于20pxdoc.style.fontSize = fontSize + 'px' //加上单位}// 监听resize事件,调整窗口大小,感受rem的作用,这里只考虑竖屏的情况window.onresize = resize //window.onresize监听div和屏幕的改变resize() //调用函数修改fontSize的值(1rem=fontSize)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。