Cómo diseñar un diseño responsivo Cómo diseñar un diseño responsivo
¿Qué es el diseño responsivo? Diseño responsivo explicado 1. El diseño responsivo es un concepto propuesto por Ethan Marcotte en mayo de 2010. En resumen, significa que un sitio web puede ser compatible con múltiples terminales, en lugar de crear una versión específica para cada terminal. Este concepto nació para solucionar el problema de la navegación por Internet móvil.
2. El diseño responsivo puede proporcionar una interfaz más cómoda y una mejor experiencia de usuario para los usuarios en diferentes terminales. Y con la popularidad de los dispositivos móviles de pantalla grande, no es exagerado describirlo como "la tendencia general". A medida que más y más diseñadores adoptan esta tecnología, no sólo vemos mucha innovación, sino también algunos patrones establecidos.
¿Cuál es la diferencia entre diseño responsivo y diseño adaptativo?
El diseño responsivo está diseñado para adaptarse a diferentes terminales. El diseño móvil es principalmente para teléfonos inteligentes, que es lo que a menudo se llama estación H5 (estación m) en la industria. Hablemos brevemente de sus diferencias:
1. Los grupos adaptables son diferentes. Responsive se adapta a varios terminales, mientras que la mayoría de los terminales móviles son principalmente teléfonos inteligentes. 2. El diseño responsivo puede adaptarse a diferentes dispositivos terminales e implementar diferentes diseños de página. , mientras que la mayoría de los diseños móviles son diseños de una sola columna 3. El diseño responsivo puede causar más código redundante (el diseño responsivo tradicional solo se basa en consultas de medios para controlar diferentes diseños de página), el diseño móvil tiene menos código redundante y está más dirigido a los mismos puntos. :
1. En un teléfono inteligente, el efecto de la página responsiva puede ser el mismo que en el lado móvil (otros se ignoran, solo en términos de efectos)
2. para afrontar el problema de la adaptación (este también es un problema más doloroso)
¿El sitio web debe utilizar un diseño responsivo?
Hola, no necesariamente, diseño estático (StaticLayout)
Es decir, diseño web tradicional, diseñar un diseño para PC y usar desplazamiento horizontal y vertical cuando el ancho y alto de la pantalla son barra ajustada para ver la parte oscurecida;
Para dispositivos móviles, diseñe un diseño separado y use un nombre de dominio diferente, como wap o m.
Diseño adaptable (AdaptiveLayout)
La característica del diseño adaptativo (Adaptive) es definir diseños para diferentes resoluciones de pantalla. Los elementos de la página cambian cuando se cambia el diseño, pero en cada diseño, los elementos de la página no cambian cuando se ajusta el tamaño de la ventana.
Puedes pensar en el diseño adaptativo como una serie de diseños estáticos.
LiquidLayout
La característica de Liquid Layout (también llamado "Fluid") es que el ancho de los elementos de la página se adapta a la pantalla. El principal problema si el tamaño de la pantalla es demasiado grande. grande, no se mostrará correctamente en una pantalla que sea demasiado pequeña o demasiado grande en relación con su diseño original.
Responsive Layout (ResponsiveLayout)
Define diseños para diferentes resoluciones de pantalla. Al mismo tiempo, en cada diseño se aplica el concepto de diseño fluido, es decir, el ancho del. El elemento de la página cambia con Se adapta automáticamente a medida que se ajusta la ventana.
El diseño responsivo puede verse como una fusión de conceptos de diseño fluido y diseño adaptativo.
Probablemente sea eso.
Explica el diseño responsivo, ¿cómo implementarlo? ¿Cuántas maneras hay de lograr esto?
1. Implementación de código nativo.
Al diseñar páginas web en China, generalmente se dividen en dos conjuntos de páginas, PC y dispositivos móviles. Sin embargo, bajo ciertas circunstancias, debe ser posible diseñar solo una página para que diferentes puertos puedan funcionar normalmente. . Uso,
Entonces se utilizará el método adaptativo.
La implementación fundamental utilizando código nativo radica en la configuración de la consulta de medios @media.
@mediascreen puede consultar el tamaño del navegador actual, por lo que este método se puede utilizar para configurar diferentes estilos CSS en la misma página para cumplir con diferentes requisitos de resolución.
2. Adopte el diseño del marco de arranque
La página completada por el diseño del marco de arranque tiene un efecto adaptativo correspondiente automático.
Pero al escribir, debes seguir estrictamente las especificaciones de escritura de arranque para evitar problemas extraños.
Ejemplo de escritura:
Explicación: El último número corresponde al número de columnas de la valla ocupadas por el p.
col-md-6 representa 6 vallas mostradas seguidas en la PC, que es la mitad.
col-sm-6 significa que p ocupa la mitad de la línea actual en la tableta.
col-xs-12 representa el llenado del 100% de la fila actual que se muestra en el teléfono móvil.
3. Hay otras formas, como JQuery y archivos JS responsivos, como nicebox, que pueden lograr efectos adaptativos y diseños responsivos.
¿Qué es el diseño web responsivo?
Es decir, un sitio web puede ser compatible con múltiples terminales - en lugar de hacer una versión específica para cada terminal