1,CSS中声明一个全局变量
:root {
--widthtest:'' ;
}
使用var()使用变量
.wrapper {
margin: 10px;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 使用var()使用变量 */
grid-template-columns: repeat(1, var(--widthtest));
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 */
grid-template-rows: 200px;
}
2,javascript获取浏览器宽度
// 获取窗口宽度
var windowWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
// 获取div元素
var divElement = document.getElementsByClassName("wrapper");
// 将窗口宽度赋值给div的width属性
divElement.style.setProperty('--widthtest',windowWidth+'px')
</script>
效果展示
正好充满整个窗口