如何使用CSS定位移动高度？

Question

我一直使用CSS来处理宽度。 例如：

@media (min-width :  240px) and (max-width : 320px ) {
...
}

我想定位具有320px宽度的不同高度（569px和480px）的手机。

我试过了：

@media (min-width :  240px) and (max-width : 320px ) and (max-height: 568px) {
}

@media (min-width :  240px) and (max-width : 320px ) and (max-height: 480px) {
}

它对我不起作用。

我试过了

@media (min-width :  240px) and (max-width : 320px ) and (max-height: 568px) {
}

@media (min-width :  240px) and (max-width : 320px ) and (miin-height: 568px) and (max-height: 480px) {
}

我的头标签中有这个：

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />

不知道这是否与所有这些有关。 但我应该使用

height=device-height initial-scale=1

在这个标签里吗？

Answer 1

尝试一下

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

并添加到这个CSS类

width: 100%; height: 100vh;

例如：

.slider { width: 100%; height: 100vh; }

高度为100vh，您可以像设备屏幕一样显示div高度