@media 선택기 관련 문제?

Question

내가 만들고있는 사이트의 머리글을 가지고 놀고 있는데, CSS 미디어 선택기를 사용하여 헤더를 휴대폰에서 보는 방법을 변경하려고합니다. 코드 http://jsfiddle.net/ro7pbdkw/2/

하고 여기에

입니다 :

HTML :

<img src="http://lifetimefoundation.adoptsites.wpengine.com/wp-content/uploads/sites/3/2014/10/LifetimeLogolong.png" alt="LifetimeFoundation" width="311" height="122" class="header-img" align="left" style="margin-right: 10px;"/> 
<div class="header" style="background-color:#6b3f24; height:122px; width:960px;" align="center"> 
<div class="header-text" style="padding-top: 10px; text-align: left;"> 
    <h1>BUILDING FAMILIES AND FUTURES</h1> 
    <h5>Through Adoption Grants and Educational Scholarships</h5> 
</div> 
</div> 

CSS :

여기

내가 할 노력하고있어의 바이올린입니다

h1 { 
    font-family: Garamond; 
    font-size: 200%; 
    color: #FFFFFF; 
    margin: 0px; 
} 
h5 { 
font-family: Garamond; 
    font-size: 100%; 
    color: #D9825F; 
    margin: 0px; 
} 
@media handheld { 
    .header { 
     display:none; 
    } 
} 

갈색 상자를 휴대 전화에서 사라지게하고 img를 머리글로 남기고 싶지만 스타일 선택기를 실제로 제대로 작동시키지 못했습니다. 내가 뭘 잘못하고 있는지 알려주는 조언이나 의견이 있으십니까?

많은 감사를드립니다!

Answer 1

변경이

@media screen and (max-width: {{ portrait size of your handheld }}px){ 
    .header { 
     display:none; 
    } 
} 

"휴대용"이

@media handheld { 
    .header { 
     display:none; 
    } 
} 

유효한 미디어 형식이 아닙니다.이

사실, 휴대용 유효한 선택은, 그러나, 일부 장치는 핸드 헬드로 itselfs을 고려하지 않습니다 : 당신은 더 here이

EDIT 읽는 찾을 수 있습니다. 추가 정보는 here