Cómo hacer que mi sitio de Internet se adapte a cualquier resolución

Escrito por michelle norton

La resolución de la pantalla fastidia a muchos diseñadores Web porque varía de usuario a usuario y computadora a computadora. Hay dos maneras de tratar este problema y permitir que tu página se adapte a cualquier resolución. En primer lugar, usando Cascading Style Sheets o CSS (por sus siglas en inglés), puedes configurar que el ancho de la página cambie con la resolución, estableciendo porcentajes para su amplitud en el archivo CSS del sitio Web.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Necesitarás

  • Un editor de texto

Lista completaMinimizar

Instrucciones

  1. 1

    Abre el HTML de tu página y el archivo CSS en un editor de texto.

  2. 2

    Busca la etiqueta "cuerpo", en el archivo HTML. Esto indica el comienzo del área visible del sitio. Crea una etiqueta "div", debajo de "cuerpo".

  3. 3

    Otorga un ID para la etiqueta "div". Por ejemplo, "div id=page".

  4. 4

    Busca la etiqueta "/cuerpo", al final del documento. Coloca la etiqueta de término "div" antes de "/cuerpo". Debería verse así: "/div /cuerpo".

  5. 5

    Guarda tu archivo HTML.

  6. 6

    Crea elementos CSS en tu archivo CSS, para la etiqueta de cuerpo y el ID de la página. Establece los márgenes y el relleno del cuerpo a cero. Esto asegurará que el área visible cubra toda la ventana del navegador. Por ejemplo: cuerpo {margen: 0; relleno: 0;} #página { }.

  7. 7

    Configura el ancho de tu página en el ID, usando porcentajes. El porcentaje le permitirá a la página cambiar a la resolución que vea el usuario que visite el sitio. Por ejemplo: #página { ancho: 100%}

  8. 8

    Guarda tu archivo CSS.

Consejos y advertencias

  • Otra opción es configurar el ancho de tu página a la resolución más pequeña posible. Para la mayoría de los usuarios es 780 píxeles. Deberías cambiar el ancho de la #página a:
  • ancho: 780px.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media