Bien, bueno...
La verdad, bootstrap te ofrece la oportunidad de decirle cuanto espacio va a tomar el elemento que quieras colocar en cierto lugar, y otorgarle el tamaño dado un dispositivo, pero no está nunca para nada mal utilizar media querys que nos ayuden a mejorar nuestra página, la forma en que queramos que sea vea, los colores, transiciones, entre otras cosas. Te anexaré un pequeño ejemplo, yo no utilicé vh, ni vw. Netamente he utilizado media querys para ello, espero que te pueda ayudar en algo.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<style type="text/css">
#header{
background-color: lawngreen;
border:2px solid;
}
@media (max-width: 576px) and (max-width: 768px){
#header{
background-color: rgb(238, 161, 187) !important;
}
#diferente2{
background-color: aqua;
text-align: center !important;
}
#diferente3{
text-align: right;
background-color: red !important;
}
}
@media (max-width: 768px) {
#header{
background-color: aqua;
}
}
.centro>div{
background-color: red;
text-align: center;
border:2px solid;
}
@media (max-width: 768px) {
#diferente1{
text-align: left;
}
#diferente2{
text-align: right;
}
#diferente3{
background-color: lawngreen;
}
}
.footer>div{
background-color: yellow;
border:2px solid;
font-style:italic;
}
#pie1{
text-align: right;
}
#pie2{
text-align: left;
}
@media (max-width: 768px) {
#pie1,#pie2{
text-align: center;
}
}
</style>
<body>
<div>
<div class="container">
<!-- ! Fila Header -->
<div class="row">
<div id="header" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-2">
<h1>Header</h1>
</div>
</div>
<!-- ! Fila CUADROS CENTRALES -->
<div class="centro row mb-2">
<div id="diferente1" class="col-sm-6 col-md-4">
<h1>1</h1>
</div>
<div id="diferente2" class="col-sm-6 col-md-4">
<h1>2</h1>
</div>
<div id="diferente3" class="col-sm-12 col-md-4">
<h1>3</h1>
</div>
</div>
<!-- ! Fila PIE DE PÁGINAS -->
<div class=" footer row">
<div id="pie1" class="col-sm-12 col-md-6 align-self-start">
<h1>Footer 1</h1>
</div>
<div id="pie2" class="col-sm-12 col-md-6 align-self-end">
<h1>Footer 2</h1>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
A pesar de darle, o indicarle al elemento lo que hará de acuerdo al tamaño de los dispositivos, un col-sm-4
, te dice que todo lo que esté por encima o que sea mayor que eso, será de esa forma, a menos que le indiques las demás clases al elemento.
Por ejemplo, decirle lo siguiente:
class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"
Que para "xs" tome 12 y así sucesivamente para cada tamaño, o sea, las 12 posiciones.
Pero si vemos lo siguiente:
class="col-xs-12 col-sm-6 col-md-4 col-lg-8 col-xl-10"
podemos notar que para "xs" tomará las 12, pero para "sm" tomará 6, para "md" tomará 4 y así sucesivamente. Pero tampoco está mal decirle a través de media querys por css que es lo que queremos diferente con exactitud.
Por supuesto, yo utilicé bootstrap para el ejemplo, pero respondiendo a tu pregunta: te recomendaría utilizar píxeles en vez de porcentajes, a mi parecer, es más práctico y sencillo.
Aunque por último, me gustaría agregar que algunas veces el !important
es muy valioso, pero peligroso al momento de usar los querys, seguramente lo haces bien pero tan sólo te falta ese detalle.