Diseño adaptativo con css
Por ASP clásico / 01/10/2014 @ 16:48:46 / 1393 visitas
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.
Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.
Descargo de Responsabilidad:
El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.
23/05/2025 @ 14:09:59
07/04/2025 @ 07:54:51
29/03/2025 @ 16:49:42
12/02/2025 @ 10:15:42
21/01/2025 @ 16:21:11
14/08/2024 @ 10:44:12
Recursos inteligentes para desarrollos con ASP Clásico.