Question

@media规则不会使不同的PHP页面显示和消失。我做错了吗？还有更好的方法吗？

这是我的索引页面中的样式，它包含在<head>中。我也在使用外部样式表，但我认为没有必要包含它们。

<style type="text/css">
<!-- Show Normal -->
@media only screen and (min-device-width: 768px) {

div#show-normal { display:block; }

div#show-mobile { display:none; }

}

<!-- Show Mobile -->
@media only screen and ((min-height : 320px) and (max-device-width : 667px)) {

div#show-normal { display:none; }

div#show-mobile { display:block; }

}
</style>

这是我身体标签的所有内容

<body>

<!-- Default -->
<div id="show_normal">
    <!-- HEADER -->
    <?php
        include("pages/default/header.php");
    ?>  

    <!-- CONTENT -->
    <div id="contentContainer">
    <?php
        include ("pages/default/infoStrip.php");
        include ("pages/default/productStrip.php");
        include ("pages/default/slideshowStrip.php");
        include ("pages/default/footer.php");
    ?>
    </div>
</div>

<!-- Mobile -->
<div id="show_mobile">
    <!-- HEADER -->
    <?php
        include("pages/mobile/header.php");
    ?>  

    <!-- CONTENT -->
    <div id="contentContainer">
    <?php
        include ("pages/mobile/infoStrip.php");
        include ("pages/mobile/productStrip.php");
        include ("pages/mobile/slideshowStrip.php");
        include ("pages/mobile/footer.php");
    ?>
    </div>
</div>

</body>

Answer 1

之后的右括号

(max-device-width : 667px)

缺少

或更好：取出

中的一个左括号

((min-height : 320px)

我的HTML中的@media不起作用

1 个答案: