媒体查询字体大小将应用于所有设置，而不仅仅是目标设置

Question

我试图让我的标题在所有移动设备上都以小组件的形式显示。 我的常规CSS是：

.mobile_1.vertical-strip-layout .widget-header {
  font-family: "Barlow Semi Condensed", "Khand", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
}

但是，在iPhone 5 / SE屏幕上，文本被模糊在一起。为了避免这种情况，我使用了媒体查询来相应地调整字体大小：

@media only screen and (max-width: 568px) {
  .mobile_1.vertical-strip-layout .widget-header{
    font-size: 14.5px;
  }
}

这很好用，但是不是将font-size: 14.5;仅 应用于iPhone 5 / SE（即最大宽度为568px的屏幕尺寸），而是将其应用于< strong>所有屏幕尺寸。

如何设置此媒体查询对iPhone 5 / SE（最大宽度：568像素）设置仅生效？

Answer 1

我认为您在第三行缺少单位定义：

代替：

font-size: 18;

使用：

font-size: 18px;