2

ブートストラップにヒーローユニットを追加し、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 に答える