为了让网页中各个组件在不同的设备上的属性变化不会太大,通常能用js获取当前设备的屏幕宽高,但是该怎么把获得的数据传回到CSS中呢?以下三步即可解决。
1、在CSS中设置全局变量
:root{
--windowW:100px;
--windowH:100px;
}
2、在js修改CSS的全局变量
//获取当前设备的宽高
var w = window.screen.availWidth;
var h = window.screen.availHeight;
//修改CSS中的全局变量
document.documentElement.style.setProperty('--windowW', w + "px")
document.documentElement.style.setProperty('--windowH', h + "px")
3、在CSS中应用全局变量
.father{
width: var(--windowW);
height: var(--windowH);
}