HTML/CSS 响应式文本

Question

我正在开发我的第一个响应式网站。我已经阅读过它并且对它有一个不错的理解。我遇到的问题之一是文本或 h1-6 标题。例如，我有一个按钮，我想在调整浏览器大小时调整它的大小。该按钮在一个类下。同样在那个 css 文件中，我有一个仅 @media 的屏幕和 (min-width : 320px) { ... 在括号内我调用了同一个类，对于宽度我放了 max-width: 50%。这很完美。我遇到的问题是，如果我再次使用元素，它会在整个页面上替换它，即使我正在全屏查看它。

我想说的是，例如，我在 css 中有一个名为“keep-button”的类，我将其设置为 font-size:25px。现在，当我转到 @media only 屏幕和 (min-width : 320px) { 并将字体大小更改为 15px。不是仅在 320 像素屏幕上将字体大小更改为 15 像素，而是对整个页面执行此操作。我试过使用字体大小调整，但没有奏效。

这是其中的示例代码：

 .keep-button {
    height: 70px;
    width: 430px;
    background-color: #C60;
    margin: auto;
    margin-top: 115px;  
}

h5 {
    font-size: 25px;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 0;
}


@media only screen and (min-width : 320px) {

.keep-button {
    max-width: 50%; 

}

h5 {
    font-size: 15px;
    font-size-adjust: .50;  
}


}

Answer 1

我认为您需要将 @media only screen and (min-width : 320px) 更改为 @media only screen and (max-width : 320px)。现在，当页面小于 320 像素时，您的规则将被应用。另外，请尝试了解 this 有关媒体查询的文章。