CSS3 变量加calc设计响应式布局

设置变量

//设置变量
:root {
     --cardWidth: 14.89vw;
}    

变量使用时的计算

//引用变量及使用calc计算  - + 计算需要左右留有空格
.equimentcard{
     margin: var(--cardMarginOne) var(--cardMarginTwo);
     width: var(--cardWidth - 10px );
     height: calc(var(--cardWidth)*0.618);
}

设置屏幕尺寸

//当屏幕宽度小于1440px 时变量的值
@media screen and (max-width: 1440px){
         :root {
            --cardWidth: 210px;
            --cardHeight: 129.78px;
        }
}