Cómo adaptar mi web a cualquier resolución de pantalla

fvsegarra · 1 Abr 2013

Hola,
me gustaría saber que mi web se viese completa en cualquier pantalla de ordenador.
No se si me podríais ayudar, pero por lo que pude ver, me parece se necesita un código para adaptar la web a cualquier resolución.

Gracias!! :welcoming:

skamasle · 1 Abr 2013

Necesitas un diseño que sea responsive, busca por ahí responsive design.

fvsegarra · 1 Abr 2013

¿No puede adaptarse manualmente?
:fatigue:

Fabián Rodríguez · 1 Abr 2013

Responsive Design es hacerlo manualmente... ya que tendrás que modificar tu plantilla para ver los cambios.

fvsegarra · 1 Abr 2013

Pero, quiero decir,
¿No hay ningún código, que insertándolo en los archivos .html o .css adapte la web a cualquier pantalla?

GrupoWayseer · 1 Abr 2013

se puede hacer de varias formas
puedes buscar en google tutoriales CSS/HTML para hacerlo
en youtube on en foros tmb encontraras buenas guias

SAludos

fvsegarra · 1 Abr 2013

sabia que podía simplemente editarse una línea de código para hacerlo!!
estuve mirando por foros etc.. y de hecho, he probado varios códigos, pero nada.
Mi problema en concreto, es que desde el laptop veo la web completa, pero desde el sobremesa la veo ampliada.
¿Alguna idea?

aquiii · 1 Abr 2013

Mira te recomiendo usar esta etiqueta entre el <head> y </head>

Insertar CODE, HTML o PHP:

<meta name="viewport" content="width=800"/>

cuando el usuario entre en un movil por ejemplo se vera adaptado a 800px de ancho..

pruebalo y verás!

fvsegarra · 1 Abr 2013

y para PC's,
alguna idea?
esa es la idea que ando buscando aquiii :welcoming:

JuniorDario · 2 Abr 2013

usa Enlace eliminado

te lo recomiendo!

Koletta · 5 Abr 2013

Como dicen los compañeros tendrás que adaptar tu tema a mano o buscar uno que sea responsive.

Para probar la web en distintas resoluciones te recomiendo [MENTION]Screenfly[/MENTION]. Muy bueno! 😎

Seliyu · 5 Abr 2013

Es relativamente fácil, pero se puede complicar en exceso....
Solo tienes que definir en el css por ejmplo

Insertar CODE, HTML o PHP:

/*TABLET*/ [MENTION=16931]medi[/MENTION]a only screen and (max-width : 768px) {
Aquí todos las nuevas reglas para adaptar a esa resolución
}

/*Mobile*/ [MENTION=16931]medi[/MENTION]a only screen and (max-width : 320px) {
Aquí todos las nuevas reglas para adaptar a esa resolución
}

Puedes poner tantas como quieras. espero te sirva de ayuda. Saludos.

yisela · 8 Abr 2013

Como menciona Seliyu, debes usar @ media queries (sin espacio entre @ y media). Lo que haces es llamar diferences estilos CSS por cada tamaño - y como es en cascada, los ultimos que agregas (si vas de mayor a menor resolucion) sobre-escriben a los previos.

Alternativamente, puedes usar solo divs con tamaño dinamico (porcentajes).

neburor · 8 Abr 2013

Fran Vise dijo:
Pero, quiero decir,
¿No hay ningún código, que insertándolo en los archivos .html o .css adapte la web a cualquier pantalla?

Depende mucho de lo que quieres hacer, quieres que tu diseño talcual se vea mas grande o mas chico segun la pantalla?? o quieres que los contenidos se adapten a la pantalla viendose estos del mismo tamaño (esto es responsive design), lo otro se puede con el metatag que te mencionan, pero si tu sitio mide de ancho 900px y lo ves en un celular de 480px pues todo el ancho se adapta a 480px y todo se hace mas chiquito aunque esto es por default, lo otro es que el ancho sea el mismo en todos los dispositivos cuando lo habren solo seve la seccion superior derecha y hay que moverse,

lo ideal sin duda alguna es el responsive design, y para lograr esto no necesariamente es logra facil con solo añadir los CSS media querys, hay que tener una correcta estructura de contenidos para que sean compatibles en su reacomodo automatico con el CSS

neurona · 10 Abr 2013

debes usar diseño responsivo como te han dicho, hay varias formas de usarlo una de ellas es usando frameworks como el que te comento JuniorDario, la otra es hacerlo manual, al hacerlo manual debes modificar no solo el encabezado sino támbien los css que tenga tu página, como ayuda inicial debes dejar de pensar en pixeles fijos y pensar en porcentajes de la pantalla, por internet hay buena documentación al respecto. saludos!

Tasio · 16 Abr 2013

Muy útil para otros que nos pasa lo mismo! Gracias!

Torrecilla · 27 Abr 2013

Como te dicen, puedes usar layouts como Bootstrap o aprender a usar grids como el 960.gs, etc.

Yo en lo personal prefiero Bootstrap, aunque hace poco hice por mi cuenta un layout que era responsivo en resoluciones de 1280 x 800 y de ahí para arriba :topsy_turvy:

Eduardo Pech · 28 Abr 2013

Definitivamente Responsive Design, se ajusta a cualquier pantalla, no tienes que hacer el codigo para cada pantalla!:encouragement:

Federico Piccoli · 28 Abr 2013

Ciao

Fran Vise dijo:
...me parece se necesita un código para adaptar la web a cualquier resolución....

No se necesita un codigo, se necesita todo el código, vas a tener que reprogramar la parte grafica de nuevo en html 5, css 3 y apoyarte en un framework.

---------- Post agregado el 28-abr-2013 hora: 09:20 ----------

Ciao

Seliyu dijo:

...

Insertar CODE, HTML o PHP:

/*TABLET*/ [MENTION=16931]medi[/MENTION]a only screen and (max-width : 768px) {
Aquí todos las nuevas reglas para adaptar a esa resolución
}

/*Mobile*/ [MENTION=16931]medi[/MENTION]a only screen and (max-width : 320px) {
Aquí todos las nuevas reglas para adaptar a esa resolución
}

.

Con esto defines distintos anchos de pagina, pero no solucionas las imágenes, ni los menus, los textos, etc...

Cómo adaptar mi web a cualquier resolución de pantalla

fvsegarra

skamasle

fvsegarra

Fabián Rodríguez

fvsegarra

GrupoWayseer

fvsegarra

aquiii

fvsegarra

JuniorDario

Koletta

Seliyu

yisela

neburor

neurona

Tasio

Torrecilla

Eduardo Pech

Federico Piccoli

Temas similares