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

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

Answer 1

我更改了 Chrome 的最小字体大小后，它正在工作。默认是 12px，所以 50% 和 62.5% 不起作用。无论如何谢谢

比利

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

rem working for fontsize, but not working for height and width

ionic2

responsive