Question

我试图了解缩放和缩放。

我有这个HTML和CSS（SCSS）：

＆＃13;

.jumbotron {
  margin: 0px auto;
  padding: 5px 0px;
}

.jumbotron h1 {
  font-size: 18px;
  font-size: 3vw;
}

.jumbotron .img-logo {
  display: inline-block;
}

@media (min-width: 0px) {
  .jumbotron .img-logo {
    width: 14%;
    max-width: 14%;
    height: auto;
    width: auto;
    background: black;
  }
}

@media (min-width: 576px) {
  .jumbotron .img-logo {
    width: 12%;
    max-width: 12%;
    height: auto;
    width: auto;
    background: green;
  }
}

@media (min-width: 768px) {
  .jumbotron .img-logo {
    width: 10%;
    max-width: 10%;
    height: auto;
    width: auto;
    background: blue;
  }
}

@media (min-width: 992px) {
  .jumbotron .img-logo {
    width: 8%;
    max-width: 8%;
    height: auto;
    width: auto;
    min-width: 8%;
    background: red;
  }
}

.jumbotron .text-logo {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<head>
  <!-- Meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/bootstrap-social.css">
  <link rel="stylesheet" href="css/styles.css">

  <title>My Music Shop</title>
</head>

<body>

  <header class="jumbotron">
    <div class="container-fluid text-center">
      <img src="img/logo.png" class="img-fluid img-logo">
      <span class="text-logo">
                <h1 class="text-uppercase">Underground Music Shop</h1>
            </span>
    </div>


    <nav class="navbar navbar-inverse navbar-toggleable-sm">
      <div class="container">
        <h3>navbar</h3>
      </div>
    </nav>
  </header>
</body>

＆＃13;

使用此代码，我的徽标和文本在响应模式下缩放，这是我最初想要的。后来，我发现在我的浏览器中改变缩放什么也没做！但我不想失去缩放功能。关于如何保持缩放和缩放的任何想法？

编辑：我删除了＆＃34;容器流体＆＃34;上课并添加＆＃34;容器＆＃34;。现在它可以缩放和缩放。我想知道什么是容器流体。

Bootstrap - 浏览器缩放响应式网站

0 个答案: