Question

我第一次尝试使用媒体查询。我头脑中有以下元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是我的HTML。

<p id="quote-box">"Quote."</p>

我的CSS中有以下代码。

#quote-box {
    background: darkred;
    width: 100%;
    color: white;
    height: 21%;
}

@media (min-width:900px){

    #quote-box {
        background: darkred;
        width: 100%;
        color: white;
        height: 10%;
    }   
}

我不确定该尝试/做什么。感谢您提前提出任何建议。

Answer 1

您正在使用媒体查询，您的CSS稍微关闭。

查看摘要时，请以全屏模式查看并更改窗口宽度。

因此#quote-box在window.width > 900px时会变为蓝色和小，否则会变红，但很大。

#quote-box {
    background: darkred;
    display: block;
    width: 100%;
    color: white;
    height: 200px;
}

@media all and (min-width:900px){
    #quote-box {
        background: blue;
        width: 100%;
        color: white;
        height: 100px;
    }   
}

<p id="quote-box">"Quote."</p>

Answer 2

您忘记指定媒体类型。看到： https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

不完全确定你在问什么...但是对于媒体查询，我相信你只需要添加将改变/不同于原始属性的属性。因此，使用上面的示例，唯一可以改变原始属性的是height属性。也许请查看这些以获得更多帮助：

https://www.w3schools.com/css/css3_mediaqueries.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

媒体查询无效

3 个答案: