HTML5/CSS3-Can'；t更改@media上的字体大小

代码有点大，但考虑到我不知道问题出在哪里，我将把我所有的HTML5文件和CSS3样式表粘贴在这里

我现在已经开始了网页设计的工作，我正在重新设计我的第一个网站，以使其具有响应性

我知道，当规则相同时，它会使count成为最后一个，保持重复并不总是一个好的做法，但在我的情况下，规则并不完全相同，我使用不同的类（“caixa”表示“box”，我为不同的位置制作了不同的字体，至少我相信我正在这样做。在这种情况下，我无法在每种情况下对@media（最大宽度：480px））进行编码时更改字体大小，无论我如何尝试……我的意思是，我甚至尝试创建新类只是为了更改它，但它无法识别。伙计们，我快发疯了。我做错了什么

对葡萄牙语课说“对不起”，是的，我把它和英语单词、习惯混在一起，如果有任何疑问，只要问一下。。。哦，对糟糕的英语说“对不起”，当然，我是个疯子，他妈的想用火箭筒把一切都炸了

我的HTML5文件（我想处理的部分）：

---

在文件的末尾，有许多“重置”类。CSS文件是自上而下读取的，以后的规则会取代上面的规则

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

这一行将重置您的媒体查询，因为它发生在代码中的查询之后：

h1、h2、h3、h4、h5、h6{字体大小：101.1%；字体重量：正常；}

我还建议您查看normalize.css：

您可以在文件的开头包含此内容

编辑：

仔细观察并不是所有文本的断点都较小，例如，您可以添加：

@media (max-width: 480px) {

    section#maria-trindade.caixa-destaque .title h2 {
    font-size: 30px;
    }
}

您还可以添加任意数量的媒体块，以便在其影响的规则之后更容易添加每个媒体块。这可以在您学习时帮助您，但会增加代码的长度

.someclass {
    font-size: 10pt;
}

@media (max-width: 480px) {
    .someclass {
        font-size: 8pt;
    }
}

.someclass2 {
    color: red;
    font-size: 20pt;
}

@media (max-width: 480px) {
    .someclass2 {
        font-size: 15pt;
    }
}

---

另一方面，您的选择器非常复杂，这可能会增加您的问题。以下是一些提示：

section#maria-trindade.caixa-destaque .title h2 {
    font-size: 30px;
}

在上述规则中，您不需要节或类

#maria trindade

。标题h2应为您所需的每一个节或类，并简化了特殊性，请参阅：

我还建议您考虑使用像BEM这样的工具，因为它可以使您的类更简单：

还有一些实用程序类，例如，所有红色标题都有相同的视觉样式，但每个都有一个长而复杂的选择器

<h2 class="t-1">My title</h2>

/* style for primary headers */

.t-1 {
    font-size: 100px;
    color: rgba(233, 26, 26, 1);
    text-shadow: 4px 4px black;
}

我的标题
/*主标题的样式*/
.t-1{
字体大小：100px；
颜色：rgba（233,26,26,1）；
文本阴影：4px4px黑色；
}

你可以重用这个简单的样式，如果你的HTML结构改变了，你就不需要编辑CSS了

---

我希望这有帮助！：）

媒体查询中的其他CSS是否正常工作？如果不将您的媒体查询更新为仅媒体屏幕和（最大宽度：480px）{…}，也执行CSS lint，并且在媒体查询后不保留任何CSS…它可以覆盖媒体查询中的CSS，这是正确的！谢谢你的提示，伙计！（：我想我说不出我对这一切有多感激，我仍然没有做任何改变，我现在就开始工作，但我相信这些技巧会解决我的问题。非常感谢你在我的斗争中对我的耐心，我相信所有这些技巧会提高我的知识，主要是我的工作方式。再次非常感谢！我不会忘记这一点(:

section#maria-trindade.caixa-destaque .title h2 {
    font-size: 30px;
}

<h2 class="t-1">My title</h2>

/* style for primary headers */

.t-1 {
    font-size: 100px;
    color: rgba(233, 26, 26, 1);
    text-shadow: 4px 4px black;
}