我有一个html列表，我想锁定在移动视口基本上min-width:320px和max-width:767px。
我在这里使用了这个代码:
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
.piano-container {
max-width: 72vw;
transform: rotate(-90deg);
transform-origin: left top;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
然而，这并没有锁住视图，在手机上也不好看。
下面是一个js-Fiddle:https://jsfiddle.net/b3mqehan/
在横向和纵向方向上，min-width和max-width是不同的。是否尝试删除最小宽度和最大宽度？
@media (orientation: landscape) {
.piano-container {
max-width: 72vw;
transform: rotate(-90deg);
transform-origin: left top;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
