Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
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

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...

Por favor logueate para comentar

Recomendados

Como acceder a la administración de WordPress

Controla fácilmente todos tus wordpress con WP remote

26 febrero, 2012
Reglas CSS por defecto para los navegadores

Manual de estilo para tus web

1 febrero, 2012
Tablero de ajedrez en Html con tablas

Tablero de ajedrez en Html con tablas

18 mayo, 2011
Como acceder a la administración de WordPress

Como acceder a la administración de WordPress

12 febrero, 2016

Tutotial Monstersse

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
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 .