Diseño adaptativo con css

Código CSS

Diseño adaptativo o Responsive Web Design es la tendencia hoy en día. Para ayudarle a comenzar a trabajar rápidamente con el diseño adaptativo, he juntado un rápido tutorial. Usted puede aprender acerca de la lógica básica de las consultas que responden de diseño y medios de comunicación en 3 pasos (suponiendo que tiene los conocimientos básicos de CSS).

Paso 1. Meta Tag

La mayoría de los navegadores móviles escalan las páginas HTML al ancho de ventana de modo que quepa en la pantalla. Puede utilizar la etiqueta meta viewport para reiniciar esta. La etiqueta viewport  indica al navegador que utilice la anchura del dispositivo como el ancho de la ventana gráfica y desactivar la escala inicial. Incluir esta etiqueta meta en el <head>.

 

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

Internet Explorer 8 o inferiores versiones no soportans no soporta media querys. Usted puede utilizar los media-queries.js or respond.js para añadir compatibilidad con media query para IE.

 

<!--[if lt IE 9]>	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

 

Paso 2. Estructura HTML

En este ejemplo, tengo un diseño de página básica con un cabezazo, contenedor de contenido, barra lateral, y un pie de página. La cabecera tiene una altura fija 180px, contenedor de contenido es 600px de ancho y 300px de ancho es la barra lateral.

Paso 3. Preguntas de los medios

CSS3 consulta de medios es el truco para el diseño de respuesta. Es como la escritura, si las condiciones de decirle al navegador cómo representar la página para ancho de ventana especificada.

El siguiente conjunto de normas será en efecto si el ancho de la ventana gráfica es 980px o menos. Básicamente, me puse todo el ancho recipiente de valor de píxel de valor de porcentaje por lo que los contenedores se convertirán fluido.

 

#pagewrap {	padding: 5px;	width: 960px;	margin: 20px auto;}#header {	height: 180px;}#content {	width: 600px;	float: left;}#sidebar {	width: 300px;	float: right;}#footer {	clear: both;}/************************************************************************************MEDIA QUERIES*************************************************************************************//* for 980px or less */@media screen and (max-width: 980px) {		#pagewrap {		width: 94%;	}	#content {		width: 65%;	}	#sidebar {		width: 30%;	}}/* for 700px or less */@media screen and (max-width: 700px) {	#content {		width: auto;		float: none;	}	#sidebar {		width: auto;		float: none;	}}/* for 480px or less */@media screen and (max-width: 480px) {	#header {		height: auto;	}	h1 {		font-size: 24px;	}	#sidebar {		display: none;	}}/* border & guideline (you can ignore these) */#content {	background: #f8f8f8;}#sidebar {	background: #f0efef;}#header, #content, #sidebar {	margin-bottom: 5px;}#pagewrap, #header, #content, #sidebar, #footer {	border: solid 1px #ccc;}

Para ventana gráfica 700px o menos, especifica #content y #sidebar de ancho automático y elimina el “float” para que se muestre la anchura como completa.

Para 480px o menos (pantalla del móvil), restablece la altura de #header a “auto”, cambiar el tamaño de fuente a 24px para la etiqueta h1 y ocultar la barra lateral #sidebar.

Usted puede escribir lso media query que necesite. El propósito de las media queries consiste en aplicar diferentes reglas CSS para lograr diferentes diseños para el ancho de ventana especificada. Las media queries  pueden estar en la misma hoja de estilo o en un archivo separado.

 

 

 

tags:

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por nosotros. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.