Question

当屏幕宽度为480像素或更低时，我正在尝试调整H1标签。现在，当在移动设备上观看时，它是一个非常高的标题，所以我决定添加一个自定义的@media来解决这个问题。请忽略实际的CSS值，因为我正在使用剧烈的更改，以便在更改确实发生时显而易见。

在我的CSS中我尝试过：

@media screen and (max-width: 480px) {
    .intro h1 {
        font-size: .5em;
        line-height: 60px;
        font-weight: 100;
    }
}

并在脑海中使用了这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我尝试了几种视口代码的变体，以及@media代码的几种变体。包括：

@media only screen and (min-width: 480px) {
     .intro h1 {
        font-size: .5em;
        line-height: 60px;
        font-weight: 100;
    }

和

@media only screen and (min-device-width: 480px) {
     .intro h1 {
        font-size: .5em;
        line-height: 60px;
        font-weight: 100;
    }

等。我应该提到我正在使用bootstrap，我想知道这是否会导致一些冲突？我从来没有试过用bootstrap这样的CSS框架来实现自定义的@media代码，所以我不确定这里的规则！当我在手机上观看，或者将我的浏览器拖动到它的缩小范围时，除了我的H1标题之外没有其他任何变化，而是使用相同的大字体而不是变小。

任何帮助将不胜感激！

Answer 1

您的媒体查询看起来是正确的，请确保您在普通CSS之后进行媒体查询，因为它始终使用最后设置的CSS样式。

无法获得＆＃34; @media屏幕和＆＃34;上班

1 个答案: