在 Bootstrap 中根据图像和屏幕大小调整文本大小

debugcn 发表于 Dev

微博

这是我的 SSCCE的jsFiddle 链接，但我的代码的要点如下。我正在使用 Twitter Bootstrap 4.0 制作一个简单的页面：

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

正如您在 jsFiddle 中看到的，有几个明显的问题：

该图像是方式太大; 和
该h1图像下的标题是这样过小; 和
图像 + 标题都没有在大屏幕/视口上水平居中

我正在尝试直接调整引导程序类或 CSS 样式，以便：

图片和标题总是完美居中
在较大的屏幕上（桌面/笔记本浏览器），图像仅占屏幕高度 + 宽度的 20%
在较小的屏幕（移动设备）上，图像占据了屏幕的大部分宽度，可能在两侧都有几％的填充
在所有情况下，h1标题都会尽量调整文本大小，使其宽度与图像的宽度大致相同

谁能看到我哪里出错了？

杰伊

这是您可能会执行的操作的示例。显然，样式的细节取决于您的确切偏好。

.well-lg img{
  width:20%;
}

body{
  display:flex;
  justify-content:center;
}



@media screen and (max-width:468px){
  .well-lg img{
    width:80%;
  }
  .well-lg h1{
    font-size:4em !important;
}
}

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。