Ionic2 rem适用于字体大小，但不适用于高度和宽度

我使用的是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% }
}

---

在我更改了Chrome的最小字体大小后，它开始工作了。默认值为12px，因此50%和62.5%不工作。无论如何谢谢你

比利