Utiliza media queries
Las media query son el mecanismo que tiene CSS para testar ciertos aspectos del User Agent y el dispositivo donde se esta mostrando el documento. Esto incluye las dimensiones de la pantalla, pero también puedes saber si se trata de una impresora, cosa muy útil.
Cada media query es una expresión lógica que puede ser veradadera o falsa, (es similar a un IF).
Hay 3 formas de usarlas:
Por medio del atributo "media" del elemento "link", es decir utilizando distintos archivos .css
para cada "variante" de tu pagina.
<link rel="stylesheet" media="screen and (width <= 640px)" href="mobiles.css" />
<link rel="stylesheet" media="screen and (width > 640px)" href="escritorio.css" />
<link rel="stylesheet" media="print" href="para_imprimir.css" />
Importando mas estilos dentro de un archivo CSS, al igual que antes, utilizas diferentes archivos CSS para cada variante.
@import url(mobiles.css) screen and (width <= 640px);
@import url(escritorio.css) screen and (width > 640px);
@import url(para_imprimir.css) print;
Aplicando estilos de forma condicional dentro de un CSS (mi preferida)
.clase {
// propiedades comunes a todos los medios aqui.
}
@media screen and (width <= 640px) {
.clase {
// propiedades para mobiles aqui.
}
}
@media screen and (width > 640px) {
.clase {
// propiedades de escritorio aqui
}
}
@media print {
.clase {
// propiedades impresora aqui.
}
}
Hay otras variables que pueden ser testeadas para decidir que estilos utilizar, por ejemplo la orientación de la pantalla:
@media (orientation:portrait) {
// el celular o tableta esta en modo retrato
}
@media (orientation:landscape) {
// el celular o tableta esta apaisado
}
Te recomiendo que leas el borrador de media queries para ver que otras opciones tienes disponibles.
css
a travez demedia Queries
o de otra forma seria conBootstrap
, dejo varios enlaces con ejemplos de como puedes lograr lo que necesitas w3schools.com/css/css3_mediaqueries_ex.asp , w3schools.com/bootstrap/bootstrap_grid_system.asp , w3schools.com/css/css_grid.asp . Espero haber ayudado.