Adaptive es un conjunto de plantillas que se adaptan a todos los terminales, pero el diseño que se ve en cada dispositivo es el mismo, lo que comúnmente se conoce como ancho adaptable.
Un conjunto de plantillas responsivas se adapta a todos los terminales, pero el diseño que ve cada dispositivo puede ser diferente.
Aunque el diseño web responsivo/adaptativo traerá desventajas como una gran carga de trabajo de compatibilidad con varios dispositivos, código engorroso y tiempo de carga prolongado, son multiplataforma y terminales, se pueden diseñar una vez, son de aplicación universal y se pueden adaptar de acuerdo con La resolución de pantalla y el zoom automático de imágenes y el ajuste automático de diseños no son solo implementaciones técnicas, sino también una nueva forma de pensar sobre el diseño.
La solución para muchos sitios web es proporcionar diferentes páginas web para diferentes dispositivos, como proporcionar una versión móvil dedicada o una versión para iPhone/iPad. Aunque esto garantiza el efecto, es más problemático y requiere mantener varias versiones al mismo tiempo. Además, si un sitio web tiene varios portales, aumentará considerablemente la complejidad del diseño arquitectónico.
La adaptación aún presenta un problema. Si la pantalla es demasiado pequeña, incluso si la página web se puede adaptar al tamaño de la pantalla, se sentirá que el contenido está demasiado lleno cuando se ve en una pantalla pequeña. La capacidad de respuesta es un concepto derivado para resolver esto. problema. Puede reconocer automáticamente el ancho de la pantalla y ajustar el diseño web en consecuencia. El diseño y el contenido mostrado pueden cambiar.
Experiencia adaptable http://m.ctrip.com/html5/ Experiencia responsiva http://segmentfault.com/
Jardín secreto CSS http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. Conocimientos básicos de capacidad de respuesta. 1. Establecer metaetiqueta<meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala-inicial=1.0, escala-máxima=1.0, escalable por el usuario=no>
Se explican varios parámetros de este código:
§width = ancho del dispositivo: El ancho es igual al ancho del dispositivo actual
§escala inicial: escala inicial (la configuración predeterminada es 1.0)
§escala mínima: la escala mínima a la que el usuario puede hacer zoom (el valor predeterminado es 1,0)
§escala máxima: la escala máxima a la que el usuario puede hacer zoom (establecida de forma predeterminada en 1,0)
§escalable por el usuario: si el usuario puede hacer zoom manualmente (el valor predeterminado es no, porque no queremos que los usuarios acerquen y alejen la página)
2. Consulta de medios La consulta de medios CSS3 es un factor clave para realizar un diseño responsivo. Puede utilizar la función de consulta de medios para que la página utilice diferentes bloques CSS según el ancho del dispositivo.
Las siguientes reglas CSS entrarán en vigor cuando el ancho de la pantalla sea menor o igual a 980:
@media (orientación: retrato) y (ancho máximo: 460 px) { .video .innerBox .news a.more { display: none } .video .innerBox .news span { display: none } .video .innerBox .news { ancho: 100% } .video .innerBox .news ul { ancho: 100%; alineación de texto: centro; }}orientación: vertical | paisaje
retrato:
Especifica que la altura del área visible de la página en el dispositivo de salida especificado es mayor o igual que el ancho
paisaje:
Excepto el valor vertical, todos son horizontales.
Seleccione Cargar CSS para cargar el archivo smallScreen.css si el ancho de la pantalla está entre 400 y 600 píxeles.
<link rel=tipo de hoja de estilo=text/cssmedia=pantalla y (ancho mínimo: 400 px) y (ancho máximo del dispositivo: 600 px) href=smallScreen.css />
3. Diseño porcentual
3. Diseño de páginas, fuentes y procesamiento de imágenes responsivos1. Proceso de diseño de una página responsiva html5/css3
Paso 1: Determinar el tipo de dispositivo y tamaño de pantalla que deben ser compatibles: incluidos dispositivos móviles (teléfonos móviles, tabletas) y PC. Para dispositivos móviles, preste atención a agregar funciones de gestos al diseñarlos e implementarlos.
Tamaño de pantalla: incluidos varios tamaños de pantalla de teléfonos móviles (incluidos horizontales y verticales), varios tamaños de tabletas (incluidos horizontales y verticales), pantallas de computadora comunes y pantallas panorámicas.
Paso 2: Cree diferentes prototipos de estructura alámbrica para los tamaños determinados. Debe considerar cómo cambia el diseño de la página en diferentes tamaños, cómo escalar el tamaño del contenido, la eliminación de funciones y contenido, e incluso cómo operar en entornos especiales. Diseño especializado, etc. Este proceso requiere una comunicación estrecha entre diseñadores y desarrolladores front-end.
Paso 3: Diseño visual Importar las imágenes al dispositivo correspondiente para unas pruebas sencillas, que nos pueden ayudar a encontrar problemas de accesibilidad, legibilidad, etc. lo antes posible.
En comparación con el desarrollo web tradicional, las páginas de diseño responsivo tienen cambios en el diseño de la página y el tamaño del contenido, por lo que es más probable que el resultado final difiera mucho del borrador del diseño, lo que requiere más comunicación entre los desarrolladores front-end y los diseñadores.
2. Fuentes responsivas
Comparación entre varias unidades diferentes en CSS
px: píxel. Unidad de longitud relativa, el tamaño está determinado por la resolución de la pantalla. (Cooperando con las consultas de los medios)
em: unidad de longitud relativa. Equivalente al tamaño de fuente del texto dentro del objeto actual, o relativo al tamaño de fuente predeterminado del navegador si no está configurado el tamaño de fuente actual para el texto en línea. El valor de em no es fijo, hereda el tamaño de fuente del elemento principal. Todos los navegadores no modificados cumplen con: 1em=16px. Entonces 12px = 0,75 em, 10 px = 0,625 em. Para simplificar la conversión del tamaño de fuente, debe declarar Font-size=62.5% en el selector de cuerpo en CSS, lo que hace que el valor em se convierta en 16px*62.5%=10px, por lo que 12px=1.2em, 10px=1em Además, es decir, solo necesita dividir su valor de px original entre 10 y luego cambiar a em como unidad.
rem: una nueva unidad relativa en CSS3. La principal diferencia con em es que cuando se usa rem para establecer el tamaño de fuente de un elemento, sigue siendo un tamaño relativo, pero solo es relativo al elemento raíz HTML. Se puede decir que esta unidad combina las ventajas del tamaño relativo y el tamaño absoluto. A través de ella, puede ajustar todos los tamaños de fuente proporcionalmente modificando solo el elemento raíz y puede evitar la reacción en cadena de combinar tamaños de fuente capa por capa. Actualmente, todos los navegadores excepto IE8 y versiones anteriores admiten rem. Para los navegadores que no lo admiten, la solución es muy simple: escribir una declaración de unidad absoluta adicional. Estos navegadores ignoran los tamaños de fuente establecidos con rem.
%: Además, también podemos usar el porcentaje para especificar el tamaño, que representa el múltiplo de la fuente actual en relación con el tamaño de fuente predeterminado del navegador. Esta unidad también se utiliza con frecuencia en el diseño responsivo de páginas.
html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}p{font-size :14px;tamaño de fuente:1.4rem;}Cabe señalar que para ser compatible con navegadores que no admiten rem, debemos escribir el valor de px correspondiente delante de rem, para que los navegadores que no lo admitan puedan degradarse sin problemas. De hecho, no tiene que preocuparse demasiado sobre si usar el tamaño de fuente predeterminado: 100% o configurarlo en tamaño de fuente: 62,5%. Si introduce una herramienta de preprocesamiento CSS, naturalmente puede usar el valor predeterminado. Si usa tamaño de fuente: 62,5% por otras razones, no tiene nada de malo, puede restablecerlo al tamaño de fuente predeterminado que necesita en el cuerpo.
3. Procesamiento responsivo de imágenes y videos
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1. Imagen de fondo ---- consulta de medios
2. Licuefacción de la imagen ---- imagen elástica
img, objeto {ancho máximo: 100%;}https://www.filamentgroup.com/examples/responsive-images/3.elemento HTML5 <imagen>
El elemento HTML5 <picture> puede configurar varias imágenes.
Soporte del navegador
<imagen> <fuente srcset=images/img_smallflower.jpg media=(ancho máximo: 400px)> <fuente srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg estilo="margen: 0px; relleno: 0px; contorno: ninguno; altura de línea: 25,2px; tamaño de fuente: 14px; ancho: 660px; desbordamiento: oculto; claro: ambos; familia de fuentes: tahoma, arial, Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. Utilice etiquetas noscript para crear imágenes responsivas
Carga dinámica js de imágenes grandes y pequeñas.
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=tu texto alternativo class=responsivize> <img src=big.jpg></noscript > <tipo de script=text/javascript>var responsiveImageTag = { reemplazarInitialImages:function(respons) { var plataforma = escritorio; resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.length; //Prueba de ancho del dispositivo de visualización actual if(screen.width <= 767){ //767px, más pequeño que el ipad todos piensan que es plataforma móvil = móvil } //establece el elemento fuente inicial en la imagen for(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img.alt = noScriptElem.attr(data-alttext); = móvil){ img.src = noScriptElem.attr(data-mobilesrc }else{); img.src = noScriptElem.attr(data-fullsrc); } img.className = responsive; $('.img-placeholder').eq(i).html('').append(img); } } }};responsiveImageTag.replaceInitialImages('responsivize');$(ventana).resize(function(){); responsiveImageTag.replaceInitialImages('responsivize');});</script>4. Marco responsivoPersonalización: si su sitio web tiene una gran cantidad de diseños diversos, si aún desea usar bootstrap, debe modificar el marco como la capa inferior: es necesario copiar una gran cantidad de estilos y la jerarquía CSS es confusa y difícil de mantener.
En algunas situaciones, bootstrap es muy útil. Por ejemplo, si desea crear rápidamente un sitio web personal relativamente hermoso, un sitio web empresarial, una interfaz de administración de backend de blogs y otros proyectos que no requieren una gran personalización de la página, a menudo son más adecuados para proyectos de backend. La mayoría de los navegadores de sistemas backend son buenos. estilos de concesión y no son fáciles de profundizar en los detalles. O puede que no tenga experiencia en la creación de la interfaz de un sitio web, considerando la compatibilidad del navegador y los innumerables tamaños de dispositivos que Bootstrap le resolverá muchos de los problemas.