Cómo controlar el diseño responsivo para la versión móvil Cómo controlar el diseño responsivo para la versión móvil
¿Qué es el diseño responsivo? El diseño de diseño responsivo se refiere a optimizar el diseño de las páginas web en dispositivos de escritorio para que sean más fáciles de leer y operar para los usuarios en dispositivos móviles. De hecho, si utiliza con frecuencia diferentes dispositivos para navegar por Internet, será más fácil comprender la aplicación del diseño de diseño responsivo en dispositivos móviles.
El diseño de la página debe ser responsivo y ajustarse al entorno del dispositivo, y la forma específica de lograr este objetivo consta de múltiples aspectos. Lo más importante es lograrlo a través de tres tecnologías:
1. Diseño fluido, utilizando porcentajes y píxeles como unidades, haciendo el diseño más flexible. El diseño de diseño se puede implementar de varias maneras y se puede dividir en cuatro tipos: diseño fijo, diseño fijo conmutable, diseño flexible y diseño híbrido.
En segundo lugar, el diseño fijo intercambiable tiene el costo de implementación más bajo, pero tiene poca escalabilidad; el diseño flexible y el diseño híbrido son responsivos y son formas ideales de implementar un diseño responsivo. Lo que pasa es que el diseño responsivo debe implementarse de diferentes maneras para diferentes tipos de diseños de página. El diseño flexible funciona para todas las columnas y secciones iguales, pero a menudo se requiere un diseño híbrido para estructuras de varias columnas que no tienen secciones iguales.
2. Consultas de los medios. Mediante el uso de consultas de medios, podemos obtener el dispositivo y sus características y responder al plan de diseño de manera oportuna, resolviendo así los problemas que dejaban los diseños de diseño simples en el pasado.
3. Imágenes flexibles. Con la flexibilidad del diseño, las imágenes, como una de las formas importantes de información, deben tener una forma más flexible de adaptarse a los cambios de diseño. Amplíe el alcance de la investigación: además de las imágenes, también debe incluir cómo responder al contenido de información, como íconos, gráficos y videos.
La solución es diseñar la página. Un mismo contenido requiere diferentes diseños de maquetación. Uno es un diseño de escritorio hacia abajo y el otro es un diseño móvil hacia arriba. Independientemente del diseño, debe ser compatible con todos los dispositivos.
Con la popularidad de los dispositivos móviles de pantalla grande, cada vez más diseñadores están comenzando a adoptar esta tecnología. No solo hemos visto mucha innovación, sino también algunos modelos establecidos. Nos proporciona una experiencia de interfaz más cómoda.
¿El sitio web tiene que utilizar un diseño responsivo?
Hola, no necesariamente, diseño estático (StaticLayout)
Es decir, diseño web tradicional, diseña un diseño para PC, usa el desplazamiento horizontal y vertical después de ajustar el ancho y alto de la pantalla. barra para ver la parte bloqueada;
Diseñe un diseño separado para dispositivos móviles, utilizando un nombre de dominio diferente, como wap o m.
Diseño adaptable
El diseño adaptable (Adaptive) se caracteriza por definir diseños para diferentes resoluciones de pantalla. Los elementos de la página cambian cuando cambia de diseño, pero dentro de cada diseño los elementos de la página no cambian cuando se cambia el tamaño de la ventana.
Puedes pensar en los diseños adaptables como una familia de diseños estáticos.
LiquidLayout
El diseño líquido (también conocido como "Fluido") se caracteriza porque el ancho de los elementos de la página se adapta a la pantalla. El principal problema es que si la relación de pantalla es amplia. demasiado grande, entonces no se mostrará correctamente en una pantalla que sea demasiado pequeña o demasiado grande en relación con su diseño original.
Diseño responsivo
Defina diseños para diferentes resoluciones de pantalla y aplique el concepto de diseño fluido a cada diseño, es decir, el ancho de los elementos de la página se ajustará con la ventana y se ajustará automáticamente.
Puedes pensar en el diseño responsivo como una fusión de conceptos de diseño fluido y diseño adaptable.
Enn podría serlo.
¿Cuáles son las herramientas de diseño más utilizadas en HTML5?
Diseño flotante, diseño de posicionamiento y diseño responsivo, estos tres diseños son los más básicos y comúnmente utilizados. Además, el más especial es el diseño elástico, que se usa relativamente raramente y depende de la situación específica de. El proyecto. Depende. En el desarrollo de sitios web, generalmente es necesario combinar varios diseños para lograr el diseño de la página web.
Si está aprendiendo diseño de páginas web, puede obtener esta guía de diseño HTML5 para ayudarle a aprender
¿Cómo configurar un deslizador adaptativo responsivo?
Cuando creamos páginas web, debemos considerar plenamente la adaptabilidad de las páginas web.
De lo contrario, la misma página web puede tener diseños confusos en diferentes tamaños de pantalla
Opción 1: controlar la proporción de tamaño
En el encabezado del código de la página web, agregue una línea de metaetiqueta de ventana gráfica
metaname="viewport "content="width=device-width ,initial-scale=1.0">
La siguiente es una explicación de las propiedades relacionadas:
ancho: controla el tamaño de la ventana gráfica, que se puede especificar como un valor, como como 600. O un valor especial, por ejemplo ancho del dispositivo es el ancho del dispositivo (píxeles CSS cuando se escala al 100%)
alto: corresponde al ancho, especifica la altura
inicial -scale: la relación de zoom inicial, que es la relación de zoom cuando la página se carga por primera vez, 1,0 es la relación de zoom de la página. Proporción de página del 100 %
escala máxima: la proporción máxima que el usuario puede acercar
escala mínima: la proporción mínima que el usuario puede acercar
escalable por el usuario: si el usuario puede acercar y alejar manualmente
Escriba el ancho del elemento como porcentaje, no como ancho absoluto
. myDiv{
width:30%;
}
Preste atención al cálculo del ancho p aquí. Hay dos modos para configurar el ancho del CSS. modelo de caja:
p>
ancho=content-width
Ancho total real=ancho+relleno+borde<
En este caso, cuando el se establece el ancho, el ancho del contenido permanece sin cambios. Ajustar el relleno y el borde hará que el ancho total real de p cambie
width=actual-total-width
width=content-width +padding+border
En este caso, cuando se establece el ancho, el ancho total de p permanece sin cambios
Los dos modos son los siguientes. child{
width:100%;
height:100px;
}
**** La fuente usa "em" o El tamaño relativo de "rem"**
h1{
font-size: 2rem;
}
El navegador predeterminado la fuente es 16px, 2rem, es decir, 2*16px=32px
em (fontsizeoftheelement) es la unidad de tamaño de fuente relativa al elemento principal, como la em que se usa actualmente para el texto en línea (si el tamaño de fuente actual del elemento en línea El texto no está configurado), es relativo al tamaño de fuente predeterminado del navegador, por lo que el tamaño de em no es fijo
rem (fontsizeoftherootelement) es la unidad de tamaño de fuente relativa al elemento raíz
Actualmente, todos los navegadores excepto IE8 y versiones anteriores admiten rem. Para los navegadores que no soportan rem, la solución es tan simple como escribir una declaración adicional para unidades absolutas. Estos navegadores ignorarán los tamaños de fuente establecidos en rem.
h1{
tamaño de fuente:32px;
tamaño de fuente:2rem;
}
El tamaño de la imagen también se puede expresar como porcentaje
img{
width: 100%;
}
El tamaño máximo El ancho también se puede establecer, así La imagen más grande no excederá el tamaño original para evitar que la imagen se vea borrosa debido a la ampliación
img{
max-width:100%;
width:auto;
width:auto;
p>}
Opción 2: Usar consultas de medios (CSS3@media queries)
Cuando es necesario mostrar una página web en dispositivos móviles y PC al mismo tiempo, debido a las diferencias entre los dos, los tamaños de pantalla varían mucho y es posible que desee utilizar dos diseños diferentes para mostrar el contenido en un forma más fácil de usar
En este momento, puede usar consultas de medios para detectar los tamaños de pantalla de dispositivos móviles y PC, sus consultas de medios se pueden usar para detectar el tamaño de la pantalla (o ventana del navegador) y luego renderice la página usando estilos CSS apropiados
Por ejemplo, cuando la ventana del navegador tiene menos de 500 px, el fondo se volverá azul:
@mediaonlyscreenand(max-width:500px) {
cuerpo{
color de fondo:azul claro;
}
}
}
}
¿Qué es el complemento bootstrap3?
Es el marco html, css y javascript más popular para desarrollar diseños web responsivos y proyectos web orientados a dispositivos móviles
¿Qué es el diseño web responsivo?
Se refiere a la capacidad de una web de ser compatible con múltiples terminales, en lugar de realizar una versión específica para cada terminal.