1.0 Mobile Basic
1.1 Estado del navegador
Navegadores comunes en PC: navegador 360, navegador Google, navegador Firefox, navegador QQ, navegador Baidu, navegador Sogou, navegador IE.
Navegadores móviles comunes: navegador UC, navegador QQ, navegador Oppon, navegador móvil Baidu, navegador seguro 360, Google Chrome, navegador móvil Sogou, navegador Cheetah y otros navegadores varios.
Domestic UC y QQ, Baidu y otros navegadores móviles se basan en el kernel modificado de Webkit. No existe un kernel de investigación y desarrollo independiente en China, al igual que el sistema operativo doméstico de teléfonos móviles desarrollado en base a la modificación de Android.
Resumen: Compatible con los principales navegadores móviles, solo maneje el navegador del kernel Webkit.
1.2 Estado de la pantalla del teléfono móvil
-
El tamaño de la pantalla de los dispositivos móviles es muy grande y la fragmentación es grave.
-
Los dispositivos Android tienen múltiples resoluciones: 480x800, 480x854, 540x960, 720x1280, 1080x1920, etc., así como las legendarias pantallas 2K y 4k.
-
La fragmentación del iPhone también se ha intensificado en los últimos años. Las principales resoluciones de sus dispositivos son: 640x960, 640x1136, 750x1334, 1242x2208, etc.
-
Como desarrollador, no necesita prestar atención a estas resoluciones, porque nuestra unidad de tamaño común es px.
1.3 Tamaño de pantalla de terminal móvil común
1.4 Método de depuración de terminal móvil
-
Depuración móvil simulada de Chrome DevTools (Google Chrome)
-
Cree un servidor web local, un teléfono móvil y un servidor en una red de área local, acceda al servidor a través del teléfono móvil
-
Utilizando un servidor externo, acceso directo a IP o nombre de dominio
2.0 Viewport
La ventana gráfica es el área de la pantalla donde el navegador muestra el contenido de la página. Las vistas se pueden dividir en vistas de diseño, vistas visuales y vistas ideales
2.1 ventana gráfica de diseño
En general, los navegadores de dispositivos móviles tienen una vista de diseño establecida de forma predeterminada, que se utiliza para resolver el problema de que las primeras páginas del lado de la PC se muestran en los teléfonos móviles.
iOS y Android básicamente establecen esta resolución de ventana gráfica en 980px, por lo que la mayoría de las páginas web de la PC se pueden procesar en el teléfono móvil, pero los elementos se ven muy pequeños. Por lo general, puede hacer zoom manual de forma predeterminada.
2.2 Vista visual
Literalmente, es el área del sitio web que el usuario está viendo. Nota: Es el área del sitio web.
Podemos usar el zoom para manipular la ventana gráfica, pero no afectará la ventana gráfica de diseño, y la ventana gráfica de diseño seguirá manteniendo el ancho original.
2.3 Vista ideal
Para que el sitio web tenga el mejor ancho de navegación y lectura en el terminal móvil
La ventana gráfica ideal es el tamaño de ventana gráfica ideal para el dispositivo.
Necesita agregar manualmente etiquetas meta viewport para notificar las operaciones del navegador
El objetivo principal de la etiqueta de la meta-ventana gráfica: el ancho de la ventana gráfica de diseño debe ser el mismo que el ancho de la ventana gráfica ideal. Una comprensión simple es qué tan ancho es el dispositivo y qué tan ancha es la ventana gráfica que presentamos
Resumen: Nuestro desarrollo eventualmente utilizará la ventana gráfica ideal, y la ventana gráfica ideal es modificar el ancho de la ventana gráfica de diseño a la ventana gráfica visual
2.4etiqueta
La configuración de ventana gráfica más estándar
-
Mantenga el ancho de la ventana gráfica y el dispositivo consistentes
-
La relación de zoom predeterminada de la ventana gráfica es 1.0
-
No permitir que los usuarios hagan zoom
-
Relación de zoom máxima permitida 1.0
-
Relación de zoom mínima permitida 1.0
3.0 gráfico doble
3.1 Píxeles físicos y relación de píxeles físicos
Los píxeles físicos se refieren a las partículas más pequeñas que se muestran en la pantalla y están físicamente presentes. Esto lo establece el fabricante en la fábrica, por ejemplo, Apple 6 es 750 * 1334
Cuando desarrollamos, 1px no es necesariamente igual a 1 píxel físico
El número de píxeles físicos que se pueden mostrar en un px se denomina relación de píxeles físicos o relación de píxeles de pantalla
Si coloca una imagen de 100 * 100 en el teléfono, nos escalará de acuerdo con la proporción física de píxeles
lRetina (pantalla de retina) es una tecnología de visualización que puede comprimir más píxeles físicos en una pantalla para lograr una resolución más alta y mejorar la delicadeza de la pantalla.
Para una imagen de 50px * 50px, ábrala en el teléfono o en la pantalla Retina, y se ampliará de acuerdo con la proporción de píxeles físicos en este momento, lo que hará que la imagen se vea borrosa
En la configuración de vista estándar, use la imagen doble para mejorar la calidad de la imagen y resolver el problema de desenfoque en equipos de alta definición
Por lo general, utiliza una imagen doble, ya que el iPhone 6 afecta la imagen de fondo, presta atención al zoom
3.2 Escala de fondo
El atributo de tamaño de fondo especifica el tamaño de la imagen de fondo
tamaño de fondo: ancho de la imagen de fondo altura de la imagen de fondo;
Unidad: Longitud | Porcentaje | cubierta | contener;
la cubierta expande la imagen de fondo para que sea lo suficientemente grande como para que la imagen de fondo cubra completamente el área de fondo.
contener expande la imagen al tamaño máximo para que su ancho y alto se ajusten completamente al área de contenido
4.0 Opciones de desarrollo móvil y soluciones técnicas
4.1 Solución principal móvil
1. Hacer página móvil por separado (corriente principal)
Normalmente, agregue m (móvil) delante del nombre de dominio para abrir el terminal móvil. Al juzgar el dispositivo, si el dispositivo móvil está encendido, salte a la página del terminal móvil.
En otras palabras, la PC y los terminales móviles son dos conjuntos de sitios web, y el terminal de la PC está en el estilo de una PC rota. El terminal móvil está escribiendo un conjunto de sitios web que están específicamente adaptados al terminal móvil
Jingdong PC final:
JD móvil:
2. Página sensible compatible con terminal móvil (segundo)
Sitio web receptivo: la PC y el dispositivo móvil comparten un conjunto de sitios web, pero el estilo se adaptará automáticamente a diferentes pantallas
4.2 Soluciones técnicas de terminales móviles
1. Problemas de compatibilidad del navegador móvil
El navegador móvil se basa básicamente en el kernel de webkit, por lo que consideraremos problemas de compatibilidad de webkit.
Podemos usar etiquetas H5 y estilos CSS3 de forma segura.
Al mismo tiempo, solo necesitamos considerar agregar webkit al prefijo privado de nuestro navegador.
2. Estilo público móvil
Se recomienda utilizar normalize.css / para la inicialización de CSS móvil
Normalize.css: protege valiosos valores predeterminados
Normalize.css: error corregido del navegador
Normalize.css: es modular
Normalize.css: tiene documentación detallada
Dirección oficial del sitio web: http://necolas.github.io/normalize.css/
4.3 El terminal móvil utiliza mucho CSS3 box model box-sizin
Cálculo del ancho del modo tradicional: el ancho del cuadro = ancho establecido en CSS + borde + relleno
Modelo de cuadro CSS3: el ancho del cuadro = el ancho establecido en CSS, que contiene borde y relleno
En otras palabras, el modelo de caja en nuestro CSS3, el relleno y el borde no admitirán la caja
/ * Modelo de caja CSS 3 * /
Box-Dimensionamiento: Frontera-Box;
/ * * tradicional modelo de caja /
caja de dimensionamiento: Content-Box;
El terminal móvil puede ser un modelo de caja CSS3 completo
Si el lado de la PC necesita ser totalmente compatible, usamos el modo tradicional, si no consideramos la compatibilidad, elegimos el modelo de caja CSS3
4.4 Estilos especiales para móviles
/ * Modelo de cuadro CSS3 * /
box-sizing: border-box;
-webkit-box-sizing: border-box;
/ * Haga clic para resaltar que necesitamos borrar la configuración clara a transparente para completar la transparencia * /
-webkit-tap-highlight-color : transparente;
/ * En la apariencia predeterminada del navegador móvil, agregue esta propiedad en iOS para personalizar el estilo del botón y el cuadro de entrada * /
-webkit-apariencia: ninguno;
/ * Deshabilite el menú emergente cuando mantenga presionada la página * /
img, un {-webkit-táctil de llamada: none;}
5.0 Diseño móvil común
Móvil hecho por separado
-
Diseño de flujo (diseño porcentual)
-
diseño flexible flexible (muy recomendable)
-
Menos + rem + diseño de consulta de medios
-
Diseño mixto
Sensible
-
Consultas de medios
-
bootstarp
Diseño de flujo:
El diseño de transmisión es un diseño porcentual, también conocido como diseño de píxeles no fijos.
El ancho del cuadro se establece como un porcentaje para expandirse y contraerse de acuerdo con el ancho de la pantalla, no limitado por píxeles fijos, y el contenido se llena a ambos lados.
El diseño de transmisión es un diseño relativamente común utilizado en el desarrollo web móvil.
1.0 Comparación de diseño tradicional y diseño flexible
1.1 Diseño tradicional
-
Buena compatibilidad
-
Diseño engorroso
-
Limitaciones, ya no puede ser un buen diseño en el lado móvil
1.2 diseño flexible
-
Fácil de operar, diseño extremadamente simple, el terminal móvil es ampliamente utilizado
-
El soporte del navegador de PC es deficiente
-
IE11 o inferior no admite flex o solo soporte parcial
1.3 Sugerencias
-
Si se trata de un diseño de página del lado de la PC, aún use la forma tradicional
-
Si es un terminal móvil o una PC que no considera la compatibilidad, use flex
Principio de diseño flexible 2.0
-
Flex es la abreviatura de caja flexible, que significa "diseño flexible". Se utiliza para proporcionar la máxima flexibilidad para el modelo de caja. Cualquier contenedor puede designarse como diseño flexible.
-
Cuando establecemos el diseño flexible para el cuadro principal, los atributos flotante, claro y de alineación vertical de los elementos secundarios no serán válidos.
-
El diseño flexible también se denomina diseño telescópico, diseño flexible, diseño de caja telescópica, diseño de caja flexible
-
Los elementos que usan el diseño Flex se denominan contenedores Flex (flex
contenedor), denominado "contenedor". Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, denominado elemento flexible ( elemento flexible ), denominado "elemento".
Resumen : es agregar el atributo flex al cuadro padre para controlar la posición y la disposición del cuadro hijo
3.0 Atributos comunes de los padres
-
flex-direction: establece la dirección del eje principal
-
justify-content: establece la disposición de los elementos secundarios en el eje principal
-
flex-wrap: establece si los elementos secundarios se ajustan
-
align-content: establece la disposición de los elementos secundarios en el eje lateral (varias líneas)
-
align-items: establece la disposición de los elementos secundarios en el eje lateral (línea única)
-
flex-flow: atributo compuesto, equivalente a establecer flex-direction y flex-wrap al mismo tiempo
3.1 flex-direction establece la dirección del eje principal
-
En el diseño flexible, se divide en dos direcciones del eje principal y el eje lateral. Los mismos nombres son: fila y columna, eje xy eje y
-
La dirección predeterminada del eje principal es la dirección del eje x, horizontal a la derecha
-
La dirección predeterminada del eje lateral es la dirección del eje y, horizontalmente hacia abajo
-
Nota: El eje principal y el eje lateral cambiarán, dependiendo de quién establezca la dirección de flexión como el eje principal, el resto es el eje lateral. Y nuestros elementos secundarios están dispuestos a lo largo del eje principal
3.2 justify-content establece la disposición de los elementos secundarios en el eje principal
3.3 conjuntos de envoltura flexible si se debe envolver
-
Por defecto, los elementos se organizan en una línea (también llamada "eje"). Se define el atributo flex-wrap. Por defecto, no hay salto de línea en el diseño flexible.
-
nowrap no se envuelve
-
envolver
3.4 elementos de alineación Establece la disposición de los elementos secundarios en el eje lateral (línea simple)
-
Este atributo se usa para controlar la disposición de los elementos secundarios en el eje lateral (el valor predeterminado es el eje y) cuando el elemento secundario es un elemento único (línea única)
-
El inicio flexible comienza desde la cabeza
-
el extremo flexible comienza al final
-
pantalla central
-
estirar
3.5 align-content Establece la disposición de los elementos secundarios en el eje lateral (varias líneas)
Establezca la disposición de los subelementos en el eje lateral y solo se puede usar cuando los subelementos tienen saltos de línea (varias líneas), lo que no tiene efecto bajo una sola línea.
3.6 La diferencia entre align-content y align-items
-
Alinear elementos es adecuado para una sola línea, solo arriba, abajo, centro y estiramiento
-
align-content es adecuado para el caso de saltos de línea (varias líneas) (no válido en el caso de una sola línea), puede establecer la alineación superior, la alineación inferior, el centrado, el estiramiento e incluso la distribución del espacio restante y otros valores de atributo.
-
El resumen es encontrar elementos de alineación en una línea y contenido de alineación en varias líneas.
3.7 El atributo de flujo flexible es un atributo compuesto de los atributos de dirección flexible y envoltura flexible
flujo flexible: ajuste de fila;
4.0 Propiedades comunes de los elementos de diseño flexible
-
El número de acciones del subpunto flexible
-
Align-Self controla cómo los niños mismos están dispuestos en el eje lateral
-
El atributo order define el orden de los hijos (el orden anterior y posterior)
4.1 propiedades flexibles
El atributo flex define el espacio restante asignado por el subelemento, y flex se utiliza para indicar cuántas copias están ocupadas.
{.Item
Flex: <Número>; / * por defecto 0 * /
}
4.2 align-self controla cómo se organizan los niños en el eje lateral
El atributo align-self permite que un solo elemento tenga una alineación diferente que otros elementos, y puede anular el atributo align-items.
El valor predeterminado es auto, lo que significa que el atributo de elementos de alineación del elemento padre se hereda. Si no hay un elemento padre, es equivalente a estirar.
lapso: Familias con N-ésimo (2) {
/ * establecer su disposición en el lado del eje * /
align = left Auto: Flex-End;
}
4.3 atributo de orden define el orden de los artículos
Cuanto menor es el valor, mayor es la disposición, el valor predeterminado es 0.
Nota: No es lo mismo que el índice z.
.item {
orden: <número>;
}
5.0 Ctrip página de inicio haciendo caso
Enlace de red Ctrip: http://m.ctrip.com
1. Selección técnica
Plan: adoptamos un plan para crear páginas móviles por separado
Tecnología: el diseño adopta el diseño flexible
2. Crear carpetas relacionadas
3. Establezca la etiqueta del viewport e introduzca el estilo de inicialización
<meta name = "viewport" content = "width = dispositivo de ancho, el usuario escalable = no, inicial escala = 1,0, de máxima escala = 1,0, mínimo escala = 1,0"> <rel = href "hoja de estilo" enlace = "css / normalize.css"> <link rel = "hoja de estilo" href = "css / index.css">
4. Estilos de inicialización comúnmente utilizados
cuerpo {
ancho máximo: 540 px;
ancho min: 320px;
margen: 0 automático;
fuente: normal 14px / 1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: # 000;
fondo: # f2f2f2;
overflow-x: oculto;
-webkit-tap-highlight-color: transparente;
}
5. División del nombre del módulo
