-2

Cordial Saludo.

Tengo un enorme problema...

Lo que pasa es que estoy aprendiendo con esto de sitios webs, y realice uno, pero obviamente solo se ve bien en mi pantalla de equipo, no es responsive, tengo bastantes estilos, y no he logrado hacer que pueda verse por lo menos bien en varias pantallas, no se como mas puedo hacerlo, alguien me puede orientar.

Gracias.

4
  • Usa bootstrap y automaticamente se vuelve responsivo
    – abrahamhs
    el 17 oct. 2018 a las 15:31
  • Como dice abrahamsh, usa bootstrap, te hará el desarrollo más rápido y optimizado. Tendrás que leerte la documentación [enlace]getbootstrap.com/docs/4.1/getting-started/introduction/[enlace]
    – Pelukosa
    el 17 oct. 2018 a las 15:36
  • Puedes utilizar flexbox lo puedes entender mejor, y luego media queries donde adaptas la pantalla a diferentes resoluciones. el 17 oct. 2018 a las 20:30
  • Muchas Gracias a Todos Lo mejor fue implementar Boostrap y ahora se ve genial.. Gracias el 18 oct. 2018 a las 17:03

2 respuestas 2

4

Para hacer un sitio web responsivo por tu cuenta necesitas de media queries, estas son reglas que acotan estilos a diferentes resoluciones para los elementos que definas en estos, por ejemplo:

/* estos estilos son los que se aplican por defecto en tu sitio */
.col{
   width: 45%;
   background: #42F;
   display:inline-block;
   margin: 10px 0px;
}
.col h1{
   font-size:55px;
   color: #289;
   text-align: center;
   padding: 10px;
}
.col p{
   font-size:20px;
   color: #BB1;
   padding: 10px;
}

/* aqui es donde reescrbes los valores que definiste,
  no es necesario poner todos los valores completos, solo
  lo que quieres que se vea diferente cuando hay un cambio de
  resolución 
  Para evitar conflictos siempre coloca los media queries
  al final de tu hoja de estilos
*/
@media (min-width: 768px) and (max-width: 959px) {
  .col{
     background: #3B1 !important;
  }
  .col h1{
     font-size:30px;
     padding: 5px;
  }
  .col p{
     font-size:19px;
     color: #B1C;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .col{
     background: #6F0 !important;
     width: 90%;
  }
  .col h1{
     font-size:25px;
     padding: 5px;
  }
  .col p{
     font-size:14px;
     color: #3C1;
  }

}
@media (min-width: 0px) and (max-width: 479px) {
  .col{
     background: #DDD !important;
     width: 100%;
  }
  .col h1{
     font-size:21px;
     padding: 5px;
  }
  .col p{
     font-size:12px;
     color: #1CF;
  }

}
<div class="col">
   <h1>Titulo 1</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col">
   <h1>Titulo 2</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Nota: ejecuta el snippet en fullscreen o de manera normal y redimensiona el ancho del navegador para ver los resultados. Dejo el link con más infomación acerca de los media queries.

Por medio de media queries puedes ajustar los estilos que tu desees para cada resolución, solo basta con reescribir el valor para cada selector.

Por otro lado, uno de los principales paradigmas del desarrollo de software es no reinventar la rueda. Asi que, en la actualidad disponemos de frameworks que nos facilitan el trabajo, con clases predefinidas que estan listas para que la utilicemos. Son muy sencillos de utilizar, la mayoria funciona con el concepto de rejillas y columnas y cuentan con una serie de utilities que solucionan algunas otras problematicas que se presentan en el maquetado de sitios web.

Dejo una lista con frameworks más populares:

1

Bootstrap 4 es mobile first, lo que significa que todas sus clases se orientan primero a verse bien en mobile y luego en desktop.
¿Cómo se logra esto?
Bueno, si no quieres usar bootstrap, te recomiendo buscar sobre diseño responsive.
Principalmente sobre media queries que son consultas en css o javascript para identificar el tamaño de la pantalla y utilizar un estilo u otro. por ejemplo en CSS:

/* Si la pantalla es 601px o más, setea el font-size de <div> a 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Si la pantalla es 600px o menos, setea el font-size de <div> a 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

y en javascript:

function myFunction(x) {
    if (x.matches) { // si la media query coincide
        document.body.style.backgroundColor = "yellow";
    } else {
        document.body.style.backgroundColor = "pink";
    }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // se llama la función en la ejecución
x.addListener(myFunction) // se adjunta función listener si el estado cambia
5
  • Realmente los media queries, son son consultas, son reglas que se adaptan a diferentes resoluciones de la pantalla
    – Phi
    el 17 oct. 2018 a las 15:53
  • 2
    recordemos que para que las media querys de css funcionen debemos agregar en la etiqueta Head del html <meta name="viewport" content="width=device-width, initial-scale=1.0" /> de lo contrario no veremos cambios en un dispositivo móvil o tablet. el 17 oct. 2018 a las 16:12
  • 1
    @Phi si, se podrían catalogar como reglas, pero la regla es lo que se ejecuta si hay una coincidencia. indiqué que es una consulta porque eso es, consulta a la media si se cumple algo o no.
    – Roberto
    el 17 oct. 2018 a las 16:19
  • 1
    Bueno, esa es tu lógica y la manera de asociar una media query, pero técnicamente son algo distinto
    – Phi
    el 17 oct. 2018 a las 17:51
  • 1
    las reglas van dentro de la consulta y se aplican si y sólo si la consulta resulta cierta. el 17 oct. 2018 a las 21:39

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