在手机上调整字体大小答案

【问题标题】：Resizing font on mobile在手机上调整字体大小
【发布时间】：2016-07-16 15:49:43
【问题描述】：

我在下面做了一个标志设计。在大屏幕上它可以正常工作，但是当我将窗口大小减小到足够时，徽标的右侧会被切断。我希望它不会被切断并用窗口调整大小。我可以在这里使用媒体查询，但我觉得我在这里严重遗漏了一些东西。有什么想法吗？

#back {
  background: white;
  color: #fff;
  padding-top: 150px;
  overflow: hidden;
}
#back .title {
  font-size: 7em;
  color: #074f66;
  margin-top: 0;
}
#back .title .highlight {
  color: #eebf3f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id='back'>
  <div class="col-md-5 col-sm-4 col-xs-12">
    <div class='text-center'>
      <h2 class="title">my<span class="highlight">Logo</span></h2>
      <div class="bottom-spacer">
      </div>
    </div>
  </div>
  <!--//col-->
</section>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

如果需要，您可以检测手机并手动增加尺寸

Mobile Device Detection in asp.net

How do I detect a mobile browser in a .NET MVC3 application

【讨论】：

【解决方案2】：

没有。你只有两个选择：

1) JS

2) 媒体查询

【讨论】：

【解决方案3】：

只需使用媒体查询来更改您想要查看更改的断点处的任何规则。

请参阅 MDN Using Media Queries 和 @Media 以及引导程序默认设置：Bootstrap Media Queries。

示例 CSS

@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

工作示例：

.title {
  font-size: 7em;
  color: #074f66;
  margin: 0;
}
.title .highlight {
  color: #eebf3f;
}
@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h2 class="title text-center">my<span class="highlight">Logo</span></h2>

【讨论】：