rem布局,js动态设置html的fontsize大小,使rem对应的值改变,但是并没有成功,只有在css中改变html的fontsize,rem才有用
1、创建一个名称为fontsize的html文件。
2、在body中加入p元素和button按钮。
3、在自定义函数中创建一个字符串。
4、用fontsize方法设置字符串的字号为5号。
5、将返回的5号字符串赋值到p元素中。
6、在浏览器中运行该文件点击button查看返回5号字号的字符串。
直接上代码,你看一下,我用这个是对应最小屏上12px字体,大于768的都在768之内。话不多说,直接上代码
rem是相对于页面根节点(也就是Html节点)的字体大小的页面布局方式。
一般使用rem的方法是:
<!DOCTYPE html>先将html节点的字体大小设置一下,作用是在重置rem的js代码没有执行完以前,我们有一个自己设置默认的rem使用
编写script代码重置rem,我这儿的代码是使用375px宽度的设计稿为参照对象。如果想自己修改可以看到上面有一个375,375px大小设计稿对应的就是375,一对一就可以了。现在,在375px宽的屏幕下,1rem代表的就是100px,3.75rem就是整个屏幕宽度了,当屏幕宽度改变时1rem代表的宽度会改变,不过其所占的屏幕比例不会变,也就是3.75rem还是整个屏幕的宽度。