[SOLUCIONADO] Mejor forma de hacer web responsiva

[difalonso]

Cual me diriais que es la mejor forma de hacer una web responsiva?

Estoy intentando utilizar los Media Queries, pero me parece que de esa forma al final veo que triplico codigo, haciendo un css para moviles otro para tablets y otro para PCS.

No hay alguna manera de que la web se adapte a la pantalla? Quizas utilizando % de alguna manera?

Gracias!

[TSG]

Podrías probar con:

Código CSS:

width: auto;
 

o también:

Código CSS:

width: 100%;
 

(Hablando en anchura podrías hacer lo mismo en distintas aperturas)

Exactamente casi siempre se usa un diseño preciso para cada cosa.

Un cordial saludo.

[alzacon]

Iniciado por difalonso

Cual me diriais que es la mejor forma de hacer una web responsiva?

Estoy intentando utilizar los Media Queries, pero me parece que de esa forma al final veo que triplico codigo, haciendo un css para moviles otro para tablets y otro para PCS.

No hay alguna manera de que la web se adapte a la pantalla? Quizas utilizando % de alguna manera?

Gracias!

Y si los usas en un único archivo CSS.

Código CSS:

.class {
  background: red;
}
 
@media screen and (min-width: 481px) {
  .class {
    background: green;
  }
}
 
/* .... */
 

[pzin]

La cuestión es no triplicar el código, sino sólo cambiar los propiedades que te hagan falta para esa otra "vista".

Por ejemplo, si tienes unas cajas que ocupan un tercio de la pantalla para la versión normal y quieres que luego ocupen todo el ancho en la versión móvil:

Código CSS:

.box {
  float: left;
  width: 33%;
  padding: 20px;
  background: #f0f0f0;
  color: #333;
  font: 400 1rem/1.4rem 'Monaco', monospace;
  border: 2px solid firebrick;
  box-sizing: border-box;
  border-radius: 5px 10px;
}
 
@media screen and (min-width: 480px) {
  .box {
    float: none; /* reset */
    width: auto; /* reset */
    display: block;
  }
}
 

No vas a repetir colores, bordes, fuentes y demás.

La cosa es que tienes que tener claro cómo quieres tener el sitio, y no ir a ver cómo va.

[alzacon]

Cierto, se me olvido lo que comenta pzin

[difalonso]

Gracias por vuestras respuestas!

Con lo cual deduzco que segun me decis todos, lo mejor es diseñar directametne para movil y luego ir añadiendo mediante media queries el css diferente que iria en dispositivos mayores.