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

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; only 应用于 iPhone 5/SE（即屏幕尺寸最大宽度为 568px），而是应用于 所有屏幕尺寸。

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

Answer 1

我认为您缺少第 3 行的单位定义：

而不是：

font-size: 18;

使用：

font-size: 18px;