在css中使用@media隱藏div類

當屏幕尺寸變小時，我試圖隱藏電子郵件div類。在css中使用@media隱藏div類

我已經做了一個div類，其中包括一組列，但不能隱藏包含登錄用戶的電子郵件地址的div類。

<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; } 
}

來源

2017-04-25 Marty

如果你在瀏覽器檢查的元素。它是否告訴你該風格是否已應用？可能是應用它的情況，但是一旦用300或更少的值檢查屏幕寬度並且使用chrome的響應工具進行檢查，將被一些具有更高特異性值的規則覆蓋 – ThisGuyHasTwoThumbs

。它應該工作。 – rahulsm

當您的屏幕尺寸<= 300時，檢查樣式是否應用於元素。 – Ananya

你的媒體查詢應該工作，但是請注意，300像素的尺寸非常小，它比大多數移動設備較小（320px的是iPhone 4的屏幕分辨率）。

當屏幕尺寸小於或等於300px時，您的媒體查詢將設置.cert div爲display: none !important - 這是您想要的行爲嗎？

來源

2017-04-25 11:55:13

你想只隱藏電子郵件或總div？如果你想隱藏只有電子郵件，那麼CSS應該是：

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

來源

2017-04-25 12:21:51 nivas

試試這個

<!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>

來源

2017-04-25 12:53:29

在css中使用@media隱藏div類

回答

相關問題