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 在第二种情况下（横向或纵向），它的宽度超过769像素

尝试在Chrome / Firefox / Opera上提供的几种扩展程序之一来设置视口的最大宽度并模拟移动设备..

来自评论：所以从规格：IPAD 3gen：2048×1536像素....在这里你有你的答案：D只是改变最大宽度和最小宽度..或只是使用横向和肖像属性

如何使用媒体查询？

1 个答案: