Question

我正在使用ionic2，在所有移动设备的响应式布局上存在问题。我正在使用rem来设置布局，但是对于font-size，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为fontsize工作，但不适用于高度和宽度

1 个答案: