1

Este codigo vendria a ser el codigo que haria "responsive" a la pagina. Me gustaria saber si esta bien hecho. Cabe destacar que por puera de los @medias pegue el estilo de css para en que en el caso de que se vea en pc se vea bien.

@media (max-width: 460px) {
  .red-text {
    color: #1E90FF;
  }
  img{
    max-width: 100%;
    display: block;
    height: auto;
  }
  h2 {
    font-family: Lobster, monospace;
    text-align: center;
    font-size: 50px;
  }
  .tamaño1 {
    font-size: 17px;
  }
  p {
    font-size: 25px;
    font-family: Lobster;
    text-align: center;
  }
  .thick-green-border {
    border-color: rgb(107, 170, 170);
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .smaller-image {
    width: 100px;
  }


  body {
    background-color: antiquewhite;
  }
  .fullCard {

    border: 1px solid #ccc;
    border-radius: 15px;
    margin: 10px 5px;
    padding: 4px;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    background: linear-gradient(35deg,#CCFFFF, #FFCCCC  );
    font-family: Montserrat;

  }
  a{
    color: black;
  }
  a:hover{ 
    color: blue;
  }

}

Respectivamente repetiria dos @media: @media (max-width: 700px), @media (max-width: 600px) con los mismos estilos que puse en el ejemplo anterior.

En el caso de que este mal me gustaria saber cual es la forma correcta de hacer responsive una pagina ya que soy autodidacta y cada sitio tiene su manera.

1
  • 1
    Tal y como está la pregunta es bastante subjetiva: hay diferentes formas de hacerlo y no hay una que sea la forma correcta. Va a depender del criterio del programador y las necesidades del proyecto. Por ejemplo, el diseño que presentas es desktop-first (los estilos generales se aplicarán a las pantallas grandes y los media queries se usan con max-width para especificar estilos para pantallas más pequeñas como tabletas y móviles). Personalmente, prefiero el diseño mobile-first donde se empieza con el móvil y se construye hacia pantallas más grandes (con media queries con min-width).
    – Alvaro Montoro
    Commented el 27 abr. 2019 a las 0:00

2 respuestas 2

0

No esta mal lo que estas haciendo, pero te muestro como hago a modo de ejemplo:

@media only screen and (max-width: 600px) {
    clases para moviles // el maximo es 600px
}

@media only screen and (min-width: 601px) {
    clases para web desktop // a partir del minimo de 601px el estilo cambia y se adapta a escritorio
}

En mi caso utilizo este codigo para un sitio especifico, pero por lo general utilizo Bootstrap lo cual lo recomiendo porque te ahorras tiempo en escribir codigo que no esta mal aprenderlo.

Igualmente si quieres aprender mas te dejo el link de como trabajar con medias queries.

Bootstrap - https://getbootstrap.com/

4
  • 1
    Seguramente puedes simplificar el código si no usas el primer media query (construyendo los estilos de escritorio sobre los de móvil).
    – Alvaro Montoro
    Commented el 26 abr. 2019 a las 22:43
  • Joya, mil gracias!!!! Commented el 26 abr. 2019 a las 23:00
  • lo mejor para tener una pagina responsible es utilizar la siguiente libreria getbootstrap.com Commented el 26 abr. 2019 a las 23:58
  • @marcosalbertosaavedrasanabr Hay muchas librerías de componentes web y Bootstrap es la más popular, pero ¿por qué es lo mejor para crear una página responsiva?
    – Alvaro Montoro
    Commented el 27 abr. 2019 a las 0:03
0

Creo que no tienes ningún error. Como decía un comentario allá arriba “va a depender del criterio del programador y las necesidades del proyecto”. Como programador autodidacta, mi código es el resultado de una combinación de al menos unas 50 personas que he visto programar por internet.

Cuando hago el resposive no lo dejo de último, después de cada cerrada de llave hago el resposive de ese elemento, tal vez parezca raro o erróneo, pero a mi parecer es más fácil de entender lo que quiero hacer.

A modo de ejemplo:

div.contenedor {
   width: 700px;
   height: 500px;
   background: orange;
   text-align: center;
}

@media ( max-width: 600px ) {
   div.contenedor {
      width: 500px;
   }
}

@media ( max-width: 400px ) {
   div.contenedor {
      width: 95%;
   }
}


By: Jeremy Fonseca

1

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.