Html css中的媒体查询中字体大小未更改

我有以下html代码：

<div class="guide">
  <h2><b style="font-size: 3vw">filler</b></h2>
  <h1><b style="font-size: 3.2vw"> Who's cuter? Click to Choose.</b></h1>
</div>

---

颜色变为蓝色，但字体大小不变。非常感谢您的帮助。

您在

.guide

div的子项上有内联样式。请尝试在媒体查询中为这些元素添加规则：

@media screen and (min-width: 700px) {
  .guide {
    font-size: 25px;
    color: blue;
  }
}

@media screen and (min-width: 700px) {
  .guide,
  .guide h1 b,
  .guide h2 b {
    font-size: 25px !important;
    color: blue;
  }
}

---

媒体查询中的CSS被html中应用的内联CSS覆盖

您可以使用

！重要信息

在外部CSS中

@media screen and (min-width: 700px) {
  .guide {
    font-size: 25px !important;
    color: blue;
  }
}

然而，

！重要信息

规则在大多数情况下被认为是一种不好的做法。更好的解决方案可能是根本不使用内联CSS，而是将其全部包含在外部CSS中

@media screen and (min-width: 700px) {
  .guide {
    font-size: 25px !important;
    color: blue;
  }
}

---

检查此处：

它不起作用，因为您在HTML代码中添加了具有最高优先级的

内联css

从html代码中删除内联CSS。它会起作用的

<h1><b> Who's cuter? Click to Choose.</b></h1>

谁更可爱？点击选择。

请尝试使用此代码

.title{
字体大小：3vw；
}
.文本{
字体大小：3.2vw；
}
@媒体屏幕和屏幕（最小宽度：700px）{
标题
.文本{
字体大小：25px；
颜色：蓝色；
}
}

填料
谁更可爱？点击选择。

删除内联样式并使用类选择器，这样您的css规则将生效。

您的代码不起作用，因为您使用内联css

请尝试以下代码：
html:

 <div>
  <h2>
    <b class="title">filler</b>
  </h2>
  <h1>
    <b class="text">Who's cuter? Click to Choose.</b>
  </h1>
</div>

---

我想你必须使用

字体大小：25px！重要信息

因为您有内联样式。内联样式（在元素上定义的样式）优先于外部css（在另一个脚本中定义的css）。我非常确定

样式

覆盖cssInline css正在覆盖您的css。它比css选择器有更多的特殊性。或者用

来代替挖掘更深层次的整体！重要信息

s，您可以将内联样式移动到CSS。