2

我在 bootstrap 中添加了一个 hero-unit 并添加了一个 h1 标签。当我缩小屏幕时，h1 标签会在英雄单位之外流血？

您好，谢谢，这是html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hero test</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<div class="container-fluid">
    <div class="row-fluid">
    <header class="span12 hero-unit">
    <img src="img/white.png" alt="Etc
    "class="pull-right" />
    <h1>Art Conference</h1>
    <p></p>
    <p><a href="#">Learn more</a></p>
    </header>
     </div>
</div>



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4

1 回答 1

1

您可以font-size根据h1屏幕大小重新调整

.hero-unit h1{
     font-size: 4.4vw;
 }

边注：

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger
于 2013-06-20T21:15:57.350 回答