尽量减少对页面标题的CSS媒体查询？

Question

我正在工作的网页标题，以作出反应。我的代码工作并完成了任务，但我知道这是冗长的。我根据单词是如何堆叠在一起的，经过反复试验决定了宽度。

桌面

平板电脑

莫比尔县

这是我目前拥有的代码

  <div class="row">
    <div id="page-title">
      <h1>BruxZir<sup>®</sup> Solid Zirconia Crowns & Bridges</h1>
    </div>

CSS

#page-title, #page-title-video { 
  background: url(../img/top-banner.jpg) #273344 no-repeat right top;
  padding: 0.2em 0 0.2em 1em; 
}

#page-title { margin: 12px 15px 24px 15px; }
#page-title-video { margin: 12px 0 24px 0; }

#page-title h1, #page-title-video h1 { 
  color: #FFFFFF;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 1px) and (max-width: 321px) {
  #page-title h1, #page-title-video h1 {
    font-size: 18px;
  }
}

@media screen and (min-width: 322px) and (max-width: 569px) {
  #page-title h1, #page-title-video h1 {
    font-size: 20px;
  }
}

@media screen and (min-width: 570px) and (max-width: 749px) {
  #page-title h1, #page-title-video h1 {
    font-size: 22px;
  }
}

@media screen and (min-width: 750px) and (max-width: 950px) {
  #page-title h1, #page-title-video h1 {
    font-size: 24px;
  }
}

@media screen and (min-width: 951px) {
  #page-title h1, #page-title-video h1 {
    font-size: 36px;
  } 
}

Answer 1

如果您控制了您的html，那么给两个标头都提供相同的类，例如..header拉伸。对于媒体查询，您实际上可以去掉最小宽度。是的，你的代码会被重复几次。但是浏览器不会介意重写相同的参数(在这种情况下是字体大小--在任何其他情况下都可以这样做)，所以应该是这样的：

@media screen and (min-width: 951px) {
  .header-stretch {
    font-size: 36px;
  } 
}
@media screen and (max-width: 950px) {
  .header-stretch {
    font-size: 24px;
  }
}
@media screen and (max-width: 749px) {
  .header-stretch {
    font-size: 22px;
  }
}
@media screen and (max-width: 569px) {
  .header-stretch {
    font-size: 20px;
  }
}
    @media screen and  (max-width: 321px) {
  .header-stretch {
    font-size: 18px;
  }
}

Answer 2

作为另一种选择，您可以尝试使用http://fittextjs.com/，也许它比创建自定义媒体查询更适合您。

Answer 3

这可能与此无关，但：

1)为移动设备编写默认代码，然后将媒体库用于大屏幕。

2)不要使用标签或id选择器(搜索网页以获得解释)

3)用em值代替像素值。