1 Especificaciones de producción de páginas móviles
1.1 Uso de unidades de medida
Selección de unidad de medida CSS
- px: valor de píxel fijo
- em: la configuración del tamaño de fuente relativa al elemento principal se utiliza como el valor de píxel representado por el elemento actual 1 em. Por ejemplo, el tamaño de fuente del nodo principal: 10 px y el tamaño de fuente del nodo actual: 1,2 em , entonces el tamaño de fuente del nodo actual es en realidad de 12px
- rem: en relación con la configuración del tamaño de fuente del html del nodo raíz, se utiliza como el valor de píxel representado por el elemento actual 1rem. La diferencia con em es que la unidad de medida básica de rem no tiene nada que ver con el nodo principal, y solo está relacionado con la configuración del tamaño de fuente del nodo raíz, como configurar 1rem de todos los nodos en el dom actual después de que html{font-size:10px;} represente 10px
- vm/vh: Indica el ancho/alto de la ventana gráfica, el ancho total de la ventana gráfica es 100vw y la altura total es 100vh.
En el desarrollo móvil, utilizamos rem como unidad de medida básica y configuramos el tamaño de fuente predeterminado del nodo raíz en tamaño de fuente: 62,5%, porque el tamaño de fuente predeterminado del navegador móvil es 16px y 16 * 62,5% es exactamente 10px.
html {
/* 相当于 10px */
font-size: 62.5%;
}
/* #example 的字体大小为 12px*/
#example {
font-size: 1.2rem
}
/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {
font-size: 1.4rem;
width: 10rem;
height: 10rem
}
<textarea>El tamaño de fuente del contenido de las etiquetas en Android no admite la configuración remota.
1.2 Detalles de desarrollo y optimización del terminal móvil
Utilice nuevos estilos CSS3 en el terminal móvil en lugar de los hábitos de desarrollo originales en la PC
- En un diseño con un ancho del 100%, considere usar un diseño flexible para lograr la expansión y contracción automática del ancho de los elementos horizontales uno al lado del otro, así como el centrado horizontal y vertical, la distribución uniforme y la disposición de cabeza a cola. .
- El centrado vertical utiliza flexión para lograr el centrado vertical
- Intente utilizar border-radius, box-shadow, text-shadow y otros estilos CSS3 para lograr esquinas redondeadas, colores degradados, proyección de cuadros, proyección de fuentes, etc., y reduzca el uso de imágenes.
- Para íconos monocromáticos, use la importación de íconos de fuente. En este caso, puede modificar el color, tamaño, color de fondo, efectos especiales (como proyección), etc. del ícono a su gusto modificando la fuente, y ya no necesita especificar cada color Cortar una imagen
- Utilice transform:rotate(90deg) para obtener iconos girados en diferentes ángulos para evitar la necesidad de cortar una imagen en cada ángulo.
- En animación, utilice propiedades de animación CSS3 como transform:translate(x,y) para cambiar la posición de desplazamiento de los elementos y reducir el uso de izquierda y arriba para la animación de desplazamiento.
2 Procesamiento de desenfoque de imagen
En teoría, un píxel de mapa de bits corresponde a un píxel físico, de modo que la imagen se puede representar de forma perfecta y clara.
Para las pantallas de alta definición, un píxel de mapa de bits corresponde a cuatro píxeles físicos. Dado que un solo píxel de mapa de bits no se puede dividir más, la imagen se ve borrosa.
Para el problema de desenfoque de la imagen, una mejor solución es utilizar varias veces la imagen (@2x) .
Por ejemplo: para una etiqueta img de 200 × 300 (píxeles CSS), para una pantalla con dpr=2, use una imagen de 400 × 600. De esta manera, el número de píxeles en el mapa de bits es 4 veces el original. -Pantalla de definición, el número de píxeles es 4 veces. El número de píxeles de la imagen puede formar una proporción de 1:1 con el número de píxeles físicos, y la imagen será naturalmente clara.
2.1 Múltiples gráficos
La función de la imagen multiplex es mostrar la imagen de forma normal y clara en el terminal móvil.
La razón por la que se llama imágenes múltiples es que diferentes dispositivos móviles tienen diferentes resoluciones de pantalla. Por ejemplo: imagen doble, imagen triple, imagen cuádruple, etc. Estas son imágenes múltiples. Aquí presentamos el gráfico doble. El mismo principio se aplica a otros gráficos múltiples.
2.1.1 Doble gráfico
La diferencia de claridad entre usar imágenes normales directamente y usar imágenes dobles. Si usa directamente la imagen original y la lanza directamente a la página móvil, puede ver claramente que los bordes de la imagen están irregulares.
La imagen comprimida y mostrada en el modo de imagen doble es mucho más clara en comparación. Este es el efecto de varias veces.
La esencia de la imagen duplicada es llenarla con una imagen del doble del tamaño de la posición original y aún mostrarla con claridad normal después de ampliarla.
2.2 gráficos vectoriales SVG
La mayoría de las imágenes de las páginas web se basan en el procesamiento de píxeles y se distorsionarán y desenfocarán al ampliarlas.
Scalable Vector Graphics (SVG) es un lenguaje estándar abierto para describir gráficos vectoriales. Está basado en XML (lenguaje de marcado extensible). Los gráficos vectoriales SVG son escalables y se pueden usar en cualquier resolución. Imprime con alta calidad y se puede ampliar sin perder calidad de la imagen.
2.2.1 Etiquetas y estilos SVG
SVG usa etiquetas para definir varios gráficos. La etiqueta exterior es <svg>, viewBox, que puede definir un área rectangular utilizada para observar la vista SVG. Sus atributos incluyen principalmente x, y, ancho y alto, que están representados por números. Entre cada número Separado por espacios o comas, significa definir un rectángulo en la posición de las coordenadas (x, y) de la esquina superior izquierda, con ancho como ancho y alto como alto. Los atributos más utilizados se muestran en la tabla.
| Atributos | ilustrar |
|---|---|
| ancho | Se utiliza para controlar el ancho de la vista SVG. |
| altura | Se utiliza para controlar la altura de la vista SVG. |
| vercuadro | Definir la posición y el tamaño del campo de visión del usuario. |
Dentro <svg>de la etiqueta, puede utilizar algunas etiquetas predefinidas proporcionadas por SVG para dibujar gráficos o texto. Las etiquetas internas más utilizadas se muestran en la tabla.
| nombre de etiqueta | ilustrar |
|---|---|
<rect> |
etiqueta rectangular |
<circle> |
etiqueta redonda |
<ellipse> |
etiqueta ovalada |
<line> |
Etiqueta de segmento |
<polyline> |
etiqueta de polilínea |
<polygon> |
etiqueta de polígono |
<path> |
etiqueta de ruta |
<text> |
etiqueta de texto |
<tspan> |
Similar <span>, utilizado para <text>configurar la muestra de forma independiente internamente. |
Las etiquetas internas de SVG de uso común también se pueden diseñar mediante atributos. Los atributos de uso común se muestran en la tabla.
| Nombre del Atributo | valor de atributo | ilustrar |
|---|---|---|
| llenar | Cadena | Definir color de relleno y color de texto |
| opacidad de relleno | Número de coma flotante entre 0 ~ 1 | Definir la transparencia del color de relleno. |
| ataque | Cadena | Definir el color del trazo. |
| anchura del trazo | número de coma flotante mayor que 0 | Definir el ancho del trazo. |
| opacidad del trazo | Número de coma flotante entre 0 ~ 1 | Define la transparencia del color del trazo. |
| opacidad | Número de coma flotante entre 0 ~ 1 | Definir la transparencia de todo el elemento gráfico. |
| transformar | traducir(x,y) | Cacerola |
| transformar | escala(x, y) | Zoom |
| transformar | rotar(ángulo, [cx, cy]) | girar |
| transformar | sesgadoX(ángel) sesgadoY(ángel) | inclinación |
<!-- 定义一个圆形 -->
<svg width="100%" height="100%">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd"/>
</svg>
<!-- 定义一个外部svg -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
</svg>
3 tareas de práctica
- Utilice varias imágenes para resolver el problema de desenfoque de las imágenes móviles.
- Utilice SVG para introducir gráficos vectoriales.