css - 如何使用媒体查询？

Question

大家好，我正在使用以下代码来显示和隐藏一些元素，但它似乎在移动设备上不起作用。

@media screen and (max-width: 768px) and (orientation : portrait) {
    .drawer1 {
        display: block;
        top: 789px;
    }
    .drawer {
        display: none;
    }
    .drawer1-content {
        background: #fff;
        background-repeat: no-repeat;
        border-collapse: collapse;
        height: 645px;
        width: 100%;
    }
}
@media screen and (min-width: 769px)  {
    .drawer {
        bottom: 0px;
        height: 700px;
        overflow: hidden;
        position: absolute;
        width: 1024px;
        z-index: 5;
    }
    .drawer1 {
        display: block;
    }

Answer 1

..从您发布的代码来看，您似乎在末尾错过了 }..

还要检查你的设备在第一种情况下的宽度是否小于 768px 在第二种情况下(横向或纵向)它的宽度超过 769px

尝试使用 Chrome/Firefox/Opera 上可用的几个扩展之一来设置视口(viewport)的最大宽度并模拟移动设备..

来自评论: 所以从规范来看:IPAD 3gen:2048×1536 像素....在这里你有你的答案:D 只需更改最大宽度和最小宽度..或者只使用横向和纵向属性