目标：通过使用rem，使画面内容的高度和宽度自适应。
rem的值，根据设计稿来定。
假如设计稿的宽度是1920，你希望1rem=100px; fontsize=100px;
1.设定html节点的fontSize
屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。
1920/1920=100/100 ;
所以 1rem=1920/1920*100 ;
document.documentElement 是html节点
document.documentElement.style.fontSize = ((windowWidth / designWidth) * rem2px) + ‘px’;
假如，用户将屏幕拖小了，变为960。1rem将自动变为50px;
960/1920*100=50
这里需要判断下，当屏幕的宽度大于设计稿定义的宽度，用设计稿的宽度，如果小于，用屏幕宽度作为变量屏幕宽度。
var windowWidth=(window.innerWidth>designWidth)?designWidth:window.innerWidth;
2.当有横屏竖屏区别时，需要写2套，对应CSS也要写2套，写js时，根据设计不同，区别显示。
对应css
if(window.screen.width < window.screen.height){}
最终代码：
3.设置完，可以使用了，当用户拖拽，界面宽度变化，需要写个js，判断是否需要重新计算rem的大小。
① 在公共js文件内写
②在各个界面css中，先引用公共的js文件。
var needResize=true；
注：谷歌浏览器有最小字体限制，到一定字体大小之后就不会变小了。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/205687.html原文链接：https://javaforall.net
