Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Tutorial básico para Responsive Design

1 agosto, 2012
en CSS
0
Tutorial básico para Responsive Design
Share on FacebookShare on Twitter

Con unos pasos sencillos podemos tener un diseño web adaptador a los nuevos dispositivos, Responsive Design. En un primer paso añadiremos una etiqueta meta en la cabecera del documento. Después añadimos compatibilidad con los navegadores antiguos y finalmente las modificaciones necesarios a la hoja de estilos, CSS.

Resumen del Contenido

  • 1. Añadir el meta tag para la escala
  • 2. Añadir compatibilidad con navegadores antiguos
  • 3. Aplicar modificaciones al CSS
  • Ejemplos

1. Añadir el meta tag para la escala

Dentro de la etiqueta [highlight]<head>[/highlight] añadimos esta etiqueta

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Añadir compatibilidad con navegadores antiguos

Las versiones antiguas de Internet Explorer no soportan el meta “viewport”, debemos añadir un javascript que realice su función.

 

<!--&#91;if lt IE 9&#93;>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

3. Aplicar modificaciones al CSS

Escribimos el código CSS necesario que deseamos modificar el función de la resolución. Voy a utilizar como ejemplo el CSS que yo he utilizado para desplazar la barra lateral a debajo del contenido cuando la resolución del dispositivo está entre 700px y 1000px (es decir, para que funcione en un iPad).

@media screen and (min-width: 700px) and (max-width: 1000px) {
/*Todo lo que añadamos aquí se utilizará solo en resoluciones X, donde 700px<=X<=1000px*/
}

Ya con el nuevo código CSS para desplazar la barra lateral para que no permita elementos flotantes a los lados y ajustar toda la maquetación a 700px tendríamos algo como lo siguiente:

@media screen and (min-width: 700px) and (max-width: 1000px) {
 #container{
 width: 700px;
 }

#sidebar-content{
 clear: both;
 width: 100%;
 float:none;
 }
}

Ejemplos

Si quieres ver algunos ejemplo en funcionamiento solo tienes que visitar este enlace:
http://designmodo.com/responsive-design-examples/

Etiquetas: responsive design
ANUNCIO
Post anterior

WordPress 3.4 «Green». Disponible la versión final

Próximo Post

HTML5 Cheat Sheet

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

auditoría seo móvil

Guía Completa para una Auditoría SEO Móvil desde Cero

20 enero, 2024
deteccion-movil

Qué es AMP (Accelerated Mobile Pages) y porque usarlo

9 enero, 2019
Html: color, tamaño y tipo de letra

Diseño web: usuarios, contenidos y experiencias

2 diciembre, 2010
Que es una máscara de recorte en Photoshop

Que es una máscara de recorte en Photoshop

25 octubre, 2015

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .