Problemas de CSS que tengo mientras trabajo en dispositivos móviles
Reglas de formato simples: dos líneas en blanco entre las entradas y una línea en blanco para cada sección de contenido. Todos los signos de puntuación utilizan caracteres chinos.
Debe haber un espacio después del número de entrada seguido de letras en inglés, como 4.css, y un espacio entre "4 y "css".
Primero, al crear un carrusel de teléfono móvil, el ancho de la imagen del banner es el ancho de la pantalla del teléfono móvil. Se agrega un botón de cambio hacia la izquierda y hacia la derecha a la imagen del carrusel. : absoluto; elemento de posicionamiento, posicionamiento Cuando el elemento excede el contenedor principal (más allá de 100), aparecen barras de desplazamiento.
En segundo lugar, hay 3 diseños disponibles en dispositivos móviles.
1. Diseño de posicionamiento
Nota: La cabeza y la cola tienen un posicionamiento fijo. El contenido en la parte central está absolutamente posicionado, overflow-y: auto
2. Diseño flexible (lo recomiendo encarecidamente)
Nota: La escritura aquí es relativamente concisa; No hay mucha compatibilidad escrita. Tiene buena compatibilidad móvil y se puede utilizar en Android 5.1 y superior. Utilice la declaración flexible más nueva. (Este diseño es un plagio del equipo de Handspring)
3. Diseño de flujo ordinario
Nota: la cabeza y la cola todavía tienen una posición fija, pero la parte del contenido #content usa padding-top y padding -bottom para soportar la página. Este diseño es relativamente basura y causará varios problemas inexplicables de espacios en blanco en la parte superior e inferior de la página.
3. Atributos CSS
1. word-wrap: break-word; word-break: break-all hace que una línea de números consecutivos o letras en inglés se ajuste automáticamente cuando aparecen. encontrar un límite.
2. -webkit-user-select: none | normal | text Este atributo se utiliza para prohibir a los usuarios seleccionar y copiar texto. También evita que los cuadros de entrada y de selección reciban el foco. para ingresar o seleccionar. Por lo tanto, cuando utilice esta propiedad, tenga cuidado para evitar la contaminación de la entrada y la selección.
3. Selector de atributos css3: li [class*='act'], utilizado para seleccionar todos los elementos li que contienen "act" en la clase.
$('li').attr('class').indexOf('act'); Simplemente obtenga la clase del primer li y determine si tiene 'act';
Esto se puede manipular aún más con un bucle for,
for( var i = 0; i lt; $("li[class*='act']").length; i ){
$("li[class*='act']")[i] .. .
}
4.a. Copiar en)
.clearfix{}
.clearfix: después de { mostrar: tabla; contenido: ' '; borrar ambos; Método de Ni
.box{ clear: ambos; desbordamiento: oculto }
c. Escribe margin-top{} para elementos secundarios
d. margin-top para el elemento hijo y arrastre el elemento padre hacia abajo
(Baidu dice que este es un estándar W3C, siempre que se destruya la estructura del padre y el hijo)
( Baidu dice que este es el estándar W3C, siempre que se destruya la estructura de adhesión entre padres e hijos)
(Baidu dijo que este es un estándar del W3C, siempre que se destruya la estructura de adhesión entre padres e hijos)
(Baidu dijo que este es un estándar W3C, siempre que se destruya la estructura de adhesión entre padres e hijos)
(Baidu dijo que este es un estándar W3C, siempre que se destruya la estructura de se destruye la adhesión padre-hijo)
(Baidu dijo que este es un estándar W3C, siempre que se destruya la estructura padre-hijo.
Escriba border-top para el padre, o escriba padding-top para el padre. b Sí, a No.
5. unidades de altura y color css
altura: calc(100vh - 200px); Tenga en cuenta que hay espacios a ambos lados del signo menos
fondo: rgba (255, 255, 0,5); valor de color rgb y transparencia de color. Acerca de padding-top: 100; padding-left: 100;
Puede usar estos dos atributos para hacer un cuadrado absoluto. Por ejemplo, las fotos de WeChat Moments tienen un tamaño de 9 metros cuadrados y las fotos de QQ Space tienen un tamaño de 9 metros cuadrados. metros, y se desconoce el ancho de la pantalla de las fotos de Sina Weibo, con 3 seguidas. Cada ancho es 33,33333, pero la altura no se puede escribir como un porcentaje. Escriba otro div en cada elemento con un ancho de 33.3333. El ancho predeterminado de este div es el 33.33333 del padre y luego use padding-top: 100 para aumentar la altura se calcula en función del ancho existente. padding-top: 100; el valor de px de padding-top es el mismo que el ancho, por lo que se crea un cuadrado. Use posición: absoluta en el cuadrado; escriba un div con ancho: 100; div El diseño está bien.
El espacio entre cada cuadrado puede usar el borde transparente de 2px del espacio qq, o el relleno izquierdo y derecho y el margen inferior de Sina Weibo. Para una imagen y cuatro imágenes, Sina está escribiendo dos clases adicionales para implementar esta funcionalidad.
El espacio qq está escrito mediante el complemento js, el ancho máximo es 290 px y la altura se calcula en función del ancho máximo.
7. Línea de 0.5px
a. Encontré la línea delgada en el espacio qq, compatible con pantalla 2x y pantalla 3x
Solo pantalla @media y (- webkit- proporción mínima de píxeles del dispositivo: 1,5), (resolución mínima: 120 ppp), (-ms-alto-contraste: activo), (-ms-alto-contraste: ninguno) {
.action .flex .menú desplegable .btn:después, .action.flex:después, .action.flex.before, .feed .source:después, .min-comments .hr, .min-comments:nth-child( 1) :después de {
-webkit-transform: scaleY(.5);
-moz- transform: scaleY(.5); -transformar: escalaY(.5);
-o-transformar: escalaY(.5);
transformar: escalaY(.5)
}
.action.flex .dropdown-menu .btn: después, .action.flex: antes, .min-comments: nth-child(1): después {
-webkit- transformar-origen: 100 0;
-moz-transform-origin: 100 0;
-ms-transform-origin: 100 0
-o; -transform -origin: 100 0;
transform-origin: 100 0
}
.action.flex: después, .action.flexgt; : después, .feed .source: después de {
-webkit-transform-origin: 0 100
-moz- transform-origin: 0 100; > - origen-transformación ms: 0 100;
-o-origen-transformación: 0 100;
origen-transformación: 0 100
}
}
Pantalla solo @media y (-webkit-device-pixel-ratio: 1.5) {
.action.flex .dropdown-menu .btn: después, .action.flex:antes, .feed .source:después, .min-comments .hr, .min-comments:nth-child(1):después {
-webkit-transform:scaleY (. 6666);
-moz-transform: escalaY(.6666);
-ms-transform: escalaY(.6666);
-o-transform: escalaY(.6666);
transforma: escalaY(.6666)
}
}
Pantalla solo @media y (-webkit-device-pixel-ratio: 3) {
.action.flex .dropdown-menu . btn: después, .action.flex: después, .action.flex: antes, .feed .source: después, .min-comments .hr, .min-comments:nth-child(1):después {
-webkit-transform.scaleY(.33);
-moz-transform: escalaY(.33);
-ms-transform: escalaY(.scaleY(. 33);
-o-transform: escalaY(.33);
escalaY(.33)
}
}
b. El método weui es
.weui-cells: después de {
contenido: " "; ;
izquierda: 0;
abajo: 0;
-o-transformar: escalaY(.33); -transformar: escalaY(.33);
transformar.
abajo:
derecha:
altura: 1px; ;
borde inferior: 1px sólido #e5e5e5;
color: #e5e5e5
-webkit-transform- origen: 0 100;
origen-transformación: 0 100;
-transformación webkit: escalaY(0.5);
transformación: escalaY(0.5); índice: 2;
}
8. tamaño de imagen de fondo tamaño de fondo, marca img ajuste de objeto, posición de objeto.
tamaño de fondo: contiene | portada | auto 90 | 50 auto;
Así es como se dimensiona el fondo
Esto se utiliza para mostrar la imagen; como imagen de fondo. Si usa el elemento img,
object-fit: fill|contain|cover|none|scale-down; (similar a background-size)
object-position: center; background -position toma el mismo valor.
Cuando estos dos atributos se usan juntos, el efecto de imagen del elemento img src se parece al efecto de la imagen de fondo, sin ser distorsionado por el tamaño desproporcionado de la imagen. Sin embargo, la compatibilidad no es muy buena y actualmente sólo es apto para su uso en dispositivos móviles.
9. Deje de mostrar el menú predeterminado en teléfonos móviles. Al presionar prolongadamente la marca img o presionar prolongadamente la marca a, aparecerá el menú predeterminado del sistema (en ios, no probado en Android).
-webkit-touch-callout: none;
10. Al escribir la altura de la línea para el texto, el texto debe estar centrado verticalmente y la altura también debe escribirse junta, línea -height: 35px ; height: 35px;
Al usar appcan para aplicaciones híbridas, descubrí que en Huawei meta8, se crearon nueve cuadrículas con ul li flotando en una fila y cada li tenía texto. La altura de li aumenta a medida que aumenta la altura de la línea. La altura de li sin texto es diferente de la de li con texto. Algunas cuadrículas tienen texto, otras no y, como resultado, nueve cuadrículas no se alinean en tres líneas y algunas cuadrículas se caen y se alinean en cuatro líneas. Por lo tanto, cuando se utiliza la altura de fila para centrar el texto, se deben escribir tanto la altura como la altura de fila.
11. text-align: justify;
Para un párrafo grande de texto en la etiqueta p, excepto la última línea, el resto del texto está alineado a la izquierda, lo que resulta en en un espacio desde la derecha del texto del párrafo significativamente mayor que la distancia desde la izquierda.
Puede utilizar este atributo para no procesar la última fila. Las características de este diseño son:
El diseño anterior tiene un pequeño error. La última fila está en blanco y el soporte principal. es alto La razón El padre considera que todos los nodos secundarios, incluidos los nodos de texto vacíos, ocupan espacio, incluso espacios. Puede escribir font-size: 0 para el ul principal; puede eliminar el espacio en blanco en la parte inferior y luego escribir font-size: 14px para el hijo. Sin embargo, text-align:justify; después de todo, se ocupa de espacios (estirar espacios para expandir elementos internos horizontalmente), por lo que en html y li, si escribe continuamente y escribe en secciones, el efecto será diferente, por lo que este maravilloso diseño Todavía es ligeramente imperfecto e incluso inutilizable.
12. Quitar la barra de desplazamiento -webkit-
#content::-webkit-scrollbar{ display: none }
Establecer el estilo de la barra de desplazamiento
p>/*Ancho de la barra de desplazamiento*
#content::-webkit- barra de desplazamiento{ ancho: 5px }
/*Control deslizante de la barra de desplazamiento**
#content::-webkit-scrollbar-thumb{ background: rgba(0, 0, 0, 0.25); border-radius: 3px;
/* Fondo completo de la barra de desplazamiento*/
#content::-webkit-scrollbar-track-piece{ background: #eee }
TGuide
/* barra de desplazamiento*/
::-webkit-scrollbar{ancho: 10px; alto: 10px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track {color de fondo: negro}
::-webkit-scrollbar-track{fondo-color.negro}
::-webkit-scrollbar-track-piece{fondo:# FFF}
::-webkit-scrollbar-thumb{fondo-color: #8E8E8E; radio de borde: 5px}
::-webkit-scrollbar-thumb:hover{fondo -color: #3B3B3B}
::-webkit-scrollbar-corner{fondo-color: #535353}
/* ::-webkit-scrollbar-resizer{fondo-color ：#FF6E00}*/
Ningún selector delante indica todos los elementos donde aparece la barra de desplazamiento.
13. Establece el estilo del marcador de posición
input::-webkit-input-placeholder{ color: #999 }
input::-moz; -input-placeholder{ color: #999; }
input: -ms-input-placeholder{ color: #999; }
Tenga en cuenta que hay un delante de - EM- ":".
14. Al mover y hacer clic en una línea: agregue un color de fondo cuando esté activo, como li: active{ background: #eee }, escriba ontouchstart en la etiqueta del cuerpo; de lo contrario, no habrá ningún efecto. .
Por otro lado, agregar al cuerpo evitará que la imagen se arrastre de forma predeterminada. El logotipo de Baidu se puede arrastrar.
15. Métodos pageshow() y pagehide().
Descripción del problema: la página A salta a la página B y, después de operar en la página B, regresa a la página A. El método ajax en la página A no se puede activar nuevamente. Cuando appcan regresa a la página A desde la página B, cierra la página B directamente y WeChat la obtiene del caché. En appcan, regresar a la página A desde la página B es cerrar directamente la página B, mientras que en WeChat se obtiene del caché. Haga clic en Entrar desde la página A para saltar a la página B y realizar la modificación. Una vez completada la modificación, regrese a la página A y descubra que la información no se actualiza. En este momento, es necesario activarla activamente.
Solución alternativa: puede utilizar el método addEventListener para escuchar el método pageshow. Mientras se muestre la página, se activará el método pageshow(). Por ejemplo, la página B en appcan cubre la página A. Si la página B está cerrada, la página A se mostrará de forma natural y el método pageshow en la página A será. activado; en WeChat, incluso si la página se obtiene del caché, al hacer clic en regresar se activará el método pageshow. pagehide() hace exactamente lo que sugiere el nombre.
16. Sobre la posición.
En las versiones Huawei meta7 y Android 4.4.2, la posición del elemento: relativa es mayor que la posición del elemento: absoluta;. El efecto de navegación de Baidu News también aprovecha esto. Esto es muy extraño.
En esta estructura, i.line es absoluto y cada div es relativo, y en Android 4.4.2, i.line quedará oculto por el div hermano de su padre.
La solución es eliminar i.line y convertirlo en hermano del div.
17. fondo: url() centro sin repetición, url() centro sin repetición Puede colocar dos imágenes al mismo tiempo, separadas por comas;
18. En los dispositivos móviles, el teclado virtual aparece y cubre la página.
La solución principal es utilizar document.activeElement.scrollIntoView(false); el parámetro false significa que el elemento activeElement está alineado con la parte inferior de la página, mientras que el parámetro true significa que el elemento activeElement está alineado. con la parte superior de la página. Este método tiene buena compatibilidad.
Otro método es similar a document.activeElement.scrollIntoViewIfNeeded(); este método no es tan efectivo como el método anterior.
19. Diseño de columnas comúnmente utilizado en novelas y diseños de periódicos.
Cuatro de las cinco propiedades comúnmente utilizadas tienen efectos conocidos:
ancho de columna:; El ancho de cada columna.
column-gap:; El espacio entre columnas.
column-fill:; No sé qué hace.
column-rule:; La línea divisoria entre cada columna, igual que el atributo de borde.
column-count:; **** se divide en varias columnas en total. (Este atributo está limitado por el ancho de columna. Cuando se escriben tanto el ancho de columna como el recuento de columnas, el ancho de columna tiene prioridad. Por ejemplo, ancho total 800 px, alto: 200 px; ancho de columna: 400 px; recuento de columnas: 4; obviamente.
800px solo se puede dividir en 2 columnas como máximo, por lo que el ancho de la columna se calcula primero).
Compatibilidad menor: en iOS, los contenedores desplazables horizontalmente con overflow-x:auto no son adecuados para usarse directamente como contenedores para el diseño de columnas; debe anidar un div dentro del elemento overflow-x para el diseño de columnas. recipiente. De lo contrario, se producirá un fenómeno extraño en el que las reglas de las columnas no se desplazan con el contenedor. Además, el espacio entre columnas no es adecuado para la asignación y el espacio entre columnas debe escribirse como 0. El espacio entre columnas se puede lograr mediante el relleno izquierdo y derecho de los subelementos de diseño de columnas.
Texto grande
.box{ ancho: 300px; alto: 14em; overflow-x: auto }/* contenedor de desplazamiento*/
.col{ altura: 11,9em; alineación de texto: justificar; recuento de columnas: 2; espacio entre columnas: 0; }/* contenedor de columnas*/
.col gt; altura: 1.2; }/* Contenedor de contenido de texto, relleno izquierdo y derecho para aumentar el espacio entre columnas. */
En cuarto lugar, parece que muchas aplicaciones web escriben dos metaetiquetas.
No estoy seguro de si se admiten valores de color hexadecimales. (Parece haber sido probado y el color hexadecimal no tiene ningún efecto. Tampoco tiene ningún efecto en appcan).
5. Generalmente, no se puede cargar la misma imagen.
Puedes usar $('input[type="file"]').wrap('').closest(' form').get(0).reset(); restablecer es suficiente.
6. Con respecto al error mágico que aparece en Android touchmove, Baidu dijo que Android touchmove activará la cancelación táctil en un instante y todos los eventos táctiles se cancelarán. IOS no tiene este problema.
La solución es escribir e.preventDefault(); en touchmove. Pero en este caso, la página no se desplazará con solo deslizar el dedo. La página no se desplazará.
7. Diseño flexible
1. Después de 2012
Agregar display: -webkit-flex; display: flex
Flexible The; La dirección de alineación de los elementos secundarios en el cuadro se denomina eje principal y la dirección perpendicular al eje principal se denomina eje transversal.
Los elementos secundarios dentro de un flexbox se pueden utilizar como elementos.
Nota: Cuando se establece en flex, las propiedades flotante, clara y de alineación vertical de sus elementos secundarios se desactivarán.
a. Seis propiedades que actúan sobre el elemento padre: flex-direction, flex-wrap, flex-flow, justify-content, align-items y align-content.
Dirección flexible: fila.dirección: fila (predeterminado, de izquierda a derecha) | fila inversa (de derecha a izquierda) | columna (de arriba a abajo) | columna-reversa (de abajo a arriba)
// Si los elementos secundarios se dividen en filas
// Abreviatura de la dirección de alineación del niño); elementos y si el elemento secundario se ajusta o no
flex-flow: row nowrap; (Predeterminado, de izquierda a derecha, sin ajuste de línea).
// Alineación de subelementos (elementos secundarios) en el eje principal
justify-content: flex-start (predeterminado, comienza desde el principio) | flex-end (comienza desde el final) | los dos primeros y últimos elementos están cerca del borde y los elementos restantes están espaciados igualmente) | El espaciado igual en ambos lados de cada elemento equivale a agregar un margen a cada elemento, y los márgenes izquierdo y derecho son igualdad Por lo tanto, el primer y último elemento están igualmente espaciados del borde
// Alineación de elementos (subelementos) en el eje horizontal
align-items: flex. -start (comenzar desde el principio) | flex-end (final desde el final) | center (centro) | baseline (elemento primero) Línea base del texto de línea) (admite el elemento principal en la dirección del eje horizontal de forma predeterminada);
// Alineación multieje, si solo hay un eje, este atributo no tiene efecto.
align-content: flex-start (alinear con el punto inicial del eje transversal) | flex-end (alinear con el punto final del eje transversal) | eje) | espacio entre (alineado con ambos extremos del eje transversal, espaciado uniformemente entre los ejes) | espacio alrededor (espaciado igual en ambos lados de cada eje. El espacio entre los ejes es el doble de la distancia entre los ejes y el borde ; la primera y la última fila no se ajustarán al borde) | Estirar (expande todo el eje horizontal de forma predeterminada
(Alinear contenido: Estirar; primer eje alineado con el borde, otros ejes incluso en el padre); brecha distribuida.
b. Seis atributos que actúan sobre elementos (elementos secundarios): orden, flex-grow, flex-shrink, flex-basis, flex, align-self.
// El orden en el que se alinean los elementos secundarios
orden: 0 (predeterminado) | 1 | 2 .
// La relación de escala del elemento (elemento secundario)
flex-grow: 0 (predeterminado, aunque queda espacio, no escala de forma predeterminada) 1 | 2 | p>
flex-shrink: 1 (de forma predeterminada, los elementos se reducirán cuando no haya espacio suficiente) | 0 (no se reducirán de todos modos
// Los elementos ocupan el espacio del eje principal<); /p>
flex -basis: auto (de forma predeterminada, los elementos mantendrán su tamaño original) | valores fijos (200px, 50, 100. .flex: 0 1 auto;
flex: 0 1 auto (por defecto, si hay espacio extra, no se ampliará, pero si no hay espacio suficiente, se reducirá. Por defecto, el espacio ocupado es su propio tamaño
); flex: auto. =gt; flex: 1 1 auto; Según el tamaño del espacio se puede ampliar o reducir (hay un problema de compatibilidad, el navegador Chrome puede analizar flex: auto; --flex: 1 1 auto;, pero el El navegador IE es divertido, IE10 analiza flex: auto - flex:1 0 auto; solo se puede acercar, no alejar. flex analizado por iE11: auto como el navegador Chrome, se puede acercar y alejar. cuando utilice esta propiedad, escriba el valor completo, no la forma corta. )
flex: none; -- flex: 0 0 auto; Anula el elemento principal al alinear un único elemento de forma diferente a otros elementos. Los align-items del elemento
align-self: auto (de forma predeterminada, hereda el valor de align-items del elemento principal) flex. -start | flex-end | center | baseline | stretch; excepto auto, igual que el atributo align-items del elemento principal
Tenga en cuenta el uso de align-self: stretch y align-items: estiramiento;
2. Versión 2009
En la actualidad, la nueva versión tiene buen soporte, por lo que la versión anterior escribe directamente el prefijo.
display: -webkit-box; display: -ms-flexbox;
Si el elemento secundario tiene display: en línea, escríbalo como display: block;
a.5 atributos del elemento padre. -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-orient y -webkit-box-lines.
// Alineación de elementos en el eje principal
-webkit- box-pack: inicio (por defecto, inicio desde) | fin centro | p>/Alineación de elementos en el eje transversal
-webkit-box-align: estirar (por defecto, soporta el padre en la dirección del eje horizontal) | fin | >
//Alineación del elemento
-webkit-box-direction: normal (por defecto, inicio | fin | retroceso
//Dirección del husillo
<); p> -webkit-box-orient.horizontal (predeterminado, horizontal) | vertical | eje en línea (en línea, se asigna al eje horizontal) | > //Elementos (si los elementos secundarios tienen nueva línea)box-lines: single (predeterminado, no permitido) | multiple (permitido);
Después de la prueba, sin compatibilidad con el navegador, esto La propiedad no tiene ningún efecto.
b. Tres atributos de elementos secundarios: box-flex, box-flex-group, box-ordinal-group.
// Ya sea para escalar
-webkit-box-flex: 0 (predeterminado, sin escalar hacia arriba o hacia abajo) 1 2 |
//Orden de los elementos secundarios
-webkit-box-ordinal-group: 1 | 2 3 .
Breve resumen de 3.1 y 2.
En comparación con la versión 2009, la versión 2012 agrega principalmente dos atributos: uno es si el elemento secundario se ajusta, es decir, flex-wrap, que no se aplica a la línea del cuadro en la versión 2009. Otra es la alineación de elementos secundarios en el lomo, la versión 2012 de justify-content: space-around la versión 2009 no tiene este efecto, pero se puede lograr agregando valores de relleno izquierdo y derecho.
Si quieres ser compatible con la versión 2009 del diseño del cuadro y quieres cambiar las filas, solo puedes cambiarlo a un diseño flotante.
8. Problema de anidamiento de la estructura HTML
La etiqueta p no anidará elementos de bloque y otros elementos de bloque como h, p, dl provocarán errores de análisis. Los elementos en línea se pueden anidar.
De manera similar, una etiqueta no se puede anidar dentro de otra etiqueta y el número de niveles de anidamiento no puede ser arbitrario.
El anidamiento de etiquetas HTML debe escribirse de acuerdo con las reglas que establecen que los elementos de bloque contienen elementos en línea.
9. Etiquetas
Deje que el navegador utilice el kernel más reciente para renderizar.
10. Algunas características de las etiquetas de formulario
En el lado móvil, después de que el cuadro de entrada se enfoca, el navegador mostrará un teclado en pantalla. Quiero que la tecla de entrada esté en el panel. teclado para convertirse en una clave de búsqueda, debe escribir esta entrada de acuerdo con esta estructura:
Descripción: onsubmit='return false'; evita que el formulario se envíe de forma predeterminada y facilita su propia operación.
El tipo de entrada debe ser búsqueda.
Agregar style='position: related;' a la entrada es para evitar el parpadeo (blanco) al hacer clic en el botón de búsqueda en ios.
xi.Compatibilidad del navegador
1. Respecto a la configuración del ancho de la tabla.
Los navegadores Firefox y Chrome tienen diferentes métodos de análisis. El navegador Chrome convertirá todos los anchos de tabla que escriba en px. Firefox no lo hace, por lo que al escribir estilos de ancho entre líneas td, no puede mezclar porcentaje y px. Para unificar, escriba cada td como un porcentaje de ancho o escríbalos todos como px, no escriba estos tds como porcentajes, y esos tds. Escrito como px.
2. Algunos sistemas Android no reconocen la altura: calc(); en su lugar, puedes usar el diseño flexible.
12. Efecto de subtítulo de KTV
Implementación 1:
Escriba el texto dos veces y los dos elementos interlíneas tienen una gran extensión y envuelven el mismo texto.
Inicio
Inicio
o
Inicio
Inicio
El principio de implementación es: iguale el ancho de los dos tramos internos, establezca uno de ellos en ancho: 0 overflow: oculto y luego use js para controlar dinámicamente el ancho de 0 a 100.
Implementación 2: (Zhang Xinxu dijo que solo es aplicable al navegador Chrome, pero lo probé y parece que Firefox también se puede usar).
Principio de implementación: fondo- la imagen se sobrescribe en el fondo En -color, el navegador Chrome tiene una propiedad privada -webkit-background-clip: text, lo que significa que el fondo se recorta con texto como punto inicial y final. El efecto de esto es que la imagen de fondo solo mostrará la ruta de escritura del texto y no mostrará la imagen de fondo excepto otras partes del espacio de texto. Combinado con -webkit-text-fill-color:transparent; escriba el color de representación del texto como transparente, de modo que la ruta del texto sea transparente a la imagen de fondo. Luego cambie la posición horizontal de la imagen de fondo y el texto y el color de fondo se podrán mostrar debajo de la imagen de fondo, creando un efecto de letra KTV.
Propiedades principales de CSS:
background-image: url(); /* Imagen de fondo sólida, utilizada para representar el color del texto porque el texto es transparente. */
repetición de fondo: sin repetición;
-webkit-fondo-clip: texto
-webkit-text-fill-color: transparente; ;
background-position: 0 0;
↑ Cámbialo y listo.
Ejemplo de implementación del método 2: