HTML-CSS（六十）js动态设置font-size

1rem=根元素的font-size值

动态设置font-size值：
js方式设置：
首先layout viewport的宽度可以通过document.documentElement.clientWidth获取。

iphone 6的visual viewport宽度是375

iphone 6的visual viewport宽度是414

使用meta，让布局视口（layout viewport的宽度）=device-width。
如果我们想要在iphone 6中设置font-size：100px。那么不就是用布局视口的宽度375（document.documentElement.clientWidth）/3.75=100。
观察 html：font-size变化

iphone 6

iPhone 6 plus

var scale=document.documentElement.clientWidth   /* 获取布局视口的宽度，也就是浏览器宽度*/
var font_size=scale/3.75    /* 经过换算，动态计算不同设备的font-size值  */
document.documentElement.style.fontSize=font_size +'px'   /* 设置 html的font-size属性*/

当然不一定要除以3.75，你可以选择除以其他的数来获取不同的font-size值。之所以会选择除以3.75主要是因为现在市场上大多数的屏幕宽是375的，换算出来的font-size刚好是100px，这样也是为了方便属性设置时能够轻易算出结果。

比如，我们平常拿到设计稿之后都是psd格式的，距离单位通常都是px，那么你要先将px转成rem，才能做到不同的移动端适配。如果拿到元素的在psd中的width是100px，然后刚好此时font-size也是100px，这样不就是1rem了吗。

如果你使用的是vscode编译器的话，你可以直接在应用商店下载px to rem ,并在应用的的扩展配置中设置font-size值。就可以实现在代码中利用vs，摁住alt+z就能够将px转rem。

如果你使用的是hbuildx编译器的话，工具->设置->编译器配置->勾选px转px转rem提示–>更改px转rem比例（一般设置一百，不过有了这个提示之后随意了）。最后你就可以在代码当你只要敲了px之后，他就会自动弹出提示，只要回车就能够更改了

VW方式设置：

1vw = 屏幕宽度的1%

在iphone 6 屏幕宽 375 ，1vw =3.75px，100px≈26.666667vw。根据不同的屏幕大小进行等比例放大

iphone 6 plus

注意：一定要先做布局视口（layout viewport）设置浏览器大小，否则屏幕宽度永远都是布局窗口的默认宽度980px。

如何使用rem布局呢？
首先不用考虑移动端视口问题，也不用考虑移动等比缩放问题，先按照pc端的普通方法，就正常的进行规划布局。然后将所有宽度和高度，都设置单位px之后。再通过等比缩放布局（rem布局方式），先将布局视口（layout viewport）设置成屏幕宽度，然后再去利用js或者vw(html{font-size:26.6666667vw})动态的将根元素的font-size设置成100px，再重置body的字体大小为16px。然后如果你是vscode编译器的话，利用下载的那个px to rem将整个代码所有的px转成rem即可。
如果在hbuild-x的话，你就先设置好布局视口（layout viewport）设置成屏幕宽度，以及html的font-size设置，然后按照pc端的普通方法，就正常的进行规划布局，遇到px提示rem回车转换就行。

注：要给body重置一下font-size：16px。因为html设置font-size之后，body会继承到html的文字属性，这是页面的字体不再是以16px默认字体出现，就会导致文字参差不齐。当我们对body重置font-size时，主要是因为针对body内部元素来说，body的优先级高于html优先级，所以body重置font-size：16px之后，页面字体还可以正常显示