HTML / CSS响应文本

Question

我正在第一个响应式网站上工作。 我已阅读并对此有一个不错的理解。 我遇到的问题之一是文本或h1-6标头。 例如，我有一个要在调整浏览器大小时调整大小的按钮。 该按钮在课程下。 同样在那个css文件中，我有一个@media only屏幕，并且（min-width：320px）{...在括号内，我调用了同一类，并为宽度设置了max-width：50％。 这完美。 我遇到的问题是，如果我再次使用element，即使我全屏查看它，它也会替换整个页面。

我想说的是，例如，我在CSS内有一个名为“ keep-button”的类，我将其设置为font-size：25px。 现在，当我进入@media only屏幕和（min-width：320px）{并将字体大小更改为15px时。 它不会在整个320px屏幕上将字体大小更改为仅15px，而是对整个页面进行更改。 我试过使用font-size-adjust，但这没用。

这里是示例代码：

 .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像素时，您的规则将适用。 另外，尽量了解该文章有关媒体查询。