我试图了解缩放和缩放。
我有这个HTML和CSS(SCSS):
.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;
}

<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;。现在它可以缩放和缩放。我想知道什么是容器流体。