在 css 中使用 @media 隐藏 div class

Question

我正试图在屏幕尺寸变小时隐藏电子邮件 div class。

我已经为 div class 完成了此操作，其中包含一组列但无法隐藏包含已登录用户电子邮件地址的 div class .

<div class="cert">
    <h1 class="certname">
        <?php
        global $current_user;
        get_currentuserinfo();
        echo 'Hi, <a href="https://vle.uxbridge.ac.uk/intranet/members/' . $current_user->user_login . '/profile/change-avatar/">' . $current_user->display_name . '</a>' . "\n";

        ?></h1>
    <h2 class="certemail">
        <?php
        global $current_user;
        get_currentuserinfo();
        echo '<a href="https://outlook.office.com/owa/" target="_blank">' . $current_user->user_email . '</a>' . "\n";

        ?>
    </h2>
</div>

和css：

@media only screen and (max-width: 300px) {
.cert { display:none !important; }
}

Answer 1

您的媒体查询应该有效，但请注意 300 像素是一个非常小的尺寸，它比大多数移动设备都小（320 像素是 iPhone 4 屏幕分辨率）。

当屏幕尺寸小于或等于 300 像素时，您的媒体查询会将 .cert div 设置为 display: none !important - 这是您想要的行为吗？

Answer 2

您只想隐藏电子邮件还是全部 div？如果你只想隐藏电子邮件，那么 css 应该是：

@media only screen and (max-width: 300px) {
.cert .certemail{ display:none !important; }
}

Answer 3

试试这个

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (max-width: 300px) {
.cert{ display:none; }
}
}
</style>
</head>
<body>
<div class="cert">
    <h1 class="certname">
        <?php
        global $current_user;
        get_currentuserinfo();
        echo 'Hi, <a href="https://vle.uxbridge.ac.uk/intranet/members/' . $current_user->user_login . '/profile/change-avatar/">' . $current_user->display_name . '</a>' . "\n";

        ?></h1>
    <h2 class="certemail">
        <?php
        global $current_user;
        get_currentuserinfo();
        echo '<a href="https://outlook.office.com/owa/" target="_blank">' . $current_user->user_email . '</a>' . "\n";

        ?>
    </h2>
</div>

</body>
</html>

在 css 中使用 @media 隐藏 div class

hide div class using @media in css

css

media