网址:http://36kr.com
屏幕宽度为320px时,html的字体大小为15px
屏幕宽度为768px时,html的字体大小是37px
以前见过在css中添加media query给body的font-size赋值,第一次见到用js控制字体的;
03021009更新:
非常感谢各位答主的回答;不过有些答主好像方向不太对;
我知道用了rem,也知道css media query,也知道用了js控制根元素html的font-size;
我现在困惑的点是:他是用什么样的标准用js计算出来的;
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
就是类似于这样就可以,
或者用rem布局也可以
说道标准,主要涉及到两点
设计稿的尺寸
rem到px的转换规则举个栗子,比如设计稿的尺寸的标准是
720,在720的标准下,转换规则为1rem为100px,这两点标准定下来,就够了。比如在设计稿中的某段文字的字体为20px,根据转换规则,在css中就是0.2rem,那么在屏幕宽度为360px的时候,我们希望字体为10px,也就是同样的0.2rem为10px,换算一下就是1rem为50px,这个50px就是我们需要动态算的,所以下面计算用到的100和720就是这个标准,当clientWidth为360的时候,计算出来的fontSize为50,也就是1rem为50px用了rem布局,因为rem的计算基础依赖于根元素字体的大小,所以用js修改了html的字体
我开发微信页面时也用rem,不过用js算效率比较低,推荐用
计算的规则是根据设计稿来的,比如我拿到的设计稿是375px,用上面的规则计算后1rem等于50px。如果设计稿上的字体是12px,css中就写成font-size:0.24rem。如果设计稿中的某个元素的高度是100px,那css中就写成2rem。这样整个页面中都可以不写px从而实现自适应。