1

al momento de crear un responsive design mobile-first ¿es recomendable usar pixeles o desde el inicio con porcentajes?

Tengo mis breakpoints parecidos a BootStrap 4:

@media (min-width: 560px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}

Vengo trabajando con unidades de medida vw y vh en el root(HTML, no directamente en el :root), ya al llegar ancho 768px que viene a ser landscape mobile y portrait tablet, en tablet se arruina la vista... Sigo trabajando con vw y vh en el root y le agrego a cada media query, orientation? Quedando así:

/* móvil */
@media (min-width: 768px) and (orientation: landscape){} 
/* tablet */
@media (min-width: 768px) and (orientation: portrait){}

No sé que pueda ser más recomendable, gracias de antemano.

PD: Para los que me puedan decir que usa directamente Bootstrap, me gusta conocer el funcionamiento de los frameworks antes de usarlos.

4
  • ¿A qué te refieres con pixeles o porcentajes? En tus ejemplos no hay porcentajes en ningún sitio. ¿Puedes poner un ejemplo de qué es lo que se ve mal y cuál es el código CSS relacionado (y en qué orden)? No termina de quedarme clara tu pregunta.
    – Alvaro Montoro
    Commented el 11 may. 2020 a las 3:12
  • Bueno Álvaro, la verdad estaba buscando la forma más adecuada para trabajar el tema del responsive design sin usar un framework, precisamente para ver cómo estos funcionan, ¿cuál era mi problema? el estar trabajando con las unidades de medidas vw y vh y en esto basaba mi responsive, claro, que sí por ejemplo le asignaba al :root o HTML 100vw y 100vh en css, todas las medidas relativas con % que usara serían en su mayoria en base a estás y bueno, las que heredaran del elemento padre, si el hijo también estaba trabajado con porcentajes. Déjame ver si tengo el código viejo y te lo comparto.
    – Angel
    Commented el 15 may. 2020 a las 18:59
  • Y trabajando con estas medidas en la parte móvil trabajaba perfecto, pero claro, cuando llegaba al punto de ancho de 768 que seria portrait tablet y landscape móvil, trabajando con estas medidas vh y vw se arruinaba un poco la imagen, ¿Por qué? Porque el viewport height de un landscape móvil, no sería el mismo que un portrait tablet y en las media querys no estaba aplicando la propiedad de orientación, la cuál era una de mis dudas, si aplicarla o no... Pero bueno, ya seguí trabajando sin vh y vw pero aún con medidas relativas de ancho y de alto pixeles y quedó bastante aceptable.
    – Angel
    Commented el 15 may. 2020 a las 19:06
  • Y bueno, por último, a pesar de que creo haberlo solucionado, de pronto algún consejo de alguien con más experiencia pudiese servirme de algo para mantener o adoptar las mejores prácticas. Y no me lo preguntas pero, cuando digo que me dejes revisar si tengo mi código viejo es porque si, no uso git, hay muchas herramientas que no uso por no tener internet, apenas y medio estudio con datos móviles y sin poder ver videos. Y nada Alvaro, gracias por comentar
    – Angel
    Commented el 15 may. 2020 a las 19:13

1 respuesta 1

1

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.

4
  • Primero que nada, muchas gracias por tomarte el tiempo de responder David, y si, aunque no he usado bootstrap medio entendí el segundo ejemplo que me diste... Y aunque no he usado !important voy a experimentar con el y nada, entonces probaré con pixeles y te estoy comentando del resultado...
    – Angel
    Commented el 9 may. 2020 a las 21:06
  • No hay problema. Cualquier duda, aquí estamos.
    – Dabydat
    Commented el 9 may. 2020 a las 22:14
  • Bueno daby, estuve experimentando un poco y dejé por completo el uso de vh y vw(excepto para menús en móvil) pero mantuve el ancho con la unidad relativa % y ajuste las medida de alto con pixeles y bueno, se adapta bastante bien a cada pantalla en unas tiene más scroll en otras menos, pero se adapta bien, que es lo importante. Y bueno, una vez más, muchas gracias 👍🏾
    – Angel
    Commented el 15 may. 2020 a las 19:18
  • Vale, no hay problema. No te preocupes. Espero haberte ayudado en algo. Gracias a ti.
    – Dabydat
    Commented el 16 may. 2020 a las 1:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.