Question

当<h1>标签的屏幕尺寸超出或小时，是否有办法更改文字大小？

因为<h1>有自己的默认尺寸，对于中等尺寸而言是正常的，但对于小尺寸和超小尺寸则非常大。

我希望在屏幕尺寸较小或屏幕尺寸过小时更改尺寸。

Answer 1

您可以创建自定义.css文件（例如：site.css），然后使用@media在不同的屏幕尺寸上创建不同的行为。要覆盖引导程序中的h1类，必须在引导程序后包含自定义css。以下是h1中site.css的示例：

h1 {
  /* Extra small devices (phones, less than 768px) */
  font-size: 10px;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    font-size: 12px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 16px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 18px;
  }
}

这是引导程序当前使用的@media规则，官方文档可以在here中看到。

Answer 2

您可以将媒体查询用于小屏幕尺寸，仅在指定宽度上应用hss的css。例如，请参见下面的代码。您可以根据需要进行修改。此代码将放在styles.css文件中。

@media only screen and (max-width: 480px)  {
      h1 {
          font-size: 18px;
      }
}

有关媒体查询的更多信息，请访问Css Tricks。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

它只是一个基本示例，展示了在使用bootstrap或任何其他设计框架时如何编写自己的CSS规则。

媒体查询

访问此CSS-trick

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style>
/* My rule */

   h1{
      font-size:12px;
   }
   
</style>
<div class="container">
  <h1>Here is the heading</h1>
</div>

＆＃13;

Answer 4

试试这段代码..

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
@media screen 
and (min-device-width: 1200px) 
and (max-device-width: 1600px) 
{ 

          font-size: 100px;


}
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 700px) 
{ 

          font-size: 25px;


}
}
 </style>

    <h1>My big company!</h1>


</html>

我希望它会有所帮助..

响应Bootstrap时更改<h1>标签的大小

4 个答案: