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 handheld {
    .header {
        display:none;
    }
}

到这个

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

＆＃34;手持＆＃34;不是有效的媒体类型。您可以进一步阅读here

修改

实际上，掌上电脑是一个有效的选择器，但有些设备并不认为它们是掌上电脑。您可以进一步阅读here

@media选择器的问题？

1 个答案: