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

을보십시오. 스타일이 적용되었는지 아닌지 알려주시겠습니까? 적용되고 있지만 더 높은 특이도 값 – ThisGuyHasTwoThumbs

으로 일부 규칙에 의해 덮어 쓰여지는 경우 일 수 있습니다. 일단 화면 폭을 300 이하로 확인하고 크롬의 반응 도구를 확인하십시오. 작동해야합니다. – rahulsm

화면 크기가 <= 300 일 때 스타일이 요소에 적용되는지 확인하십시오. – Ananya

미디어 쿼리가 작동 300 픽셀, 그것은 대부분의 모바일 기기보다 작은 매우 작은 크기의 것을 그러나주의해야한다 (320 ~ 아이폰 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 클래스를 숨 깁니다.

답변

관련 문제