rem适用于fontsize，但不适用于高度和宽度

Question

我正在使用ionic2，对所有移动设备的响应布局有一个问题。我使用rem来设置布局，但是rem只适用于字体大小，而不适用于高度和宽度。下面是代码片段和截图：

<div class="test">test</div>

.test{
            width: 6rem;
            height:4rem;
            line-height: 2rem;
            font-size: 1.5rem;
            background: #06c;
            color: white;
        }
@media only screen and (min-device-width: 0px) and (-webkit-min-device-pixel-ratio: 2){
    html {font-size: 50% }
}

@media only screen and (min-device-width: 321px)  and (-webkit-min-device-pixel-ratio: 2){
    html {font-size: 62.5% }
}
@media only screen and (min-device-width: 376px)  and (-webkit-min-device-pixel-ratio: 3){
    html {font-size: 75% }
}
@media only screen and (min-device-width: 415px)  and (-webkit-min-device-pixel-ratio: 3){
    html { font-size: 100% }
}

enter image description here

enter image description here