Acción táctil CSS
En esta guía, le mostraremos cómo establecer estos valores en la propiedad de "acción táctil" y cómo funcionará. Discutiremos los valores de la propiedad de "acción táctil" en detalle en los diferentes ejemplos de esta guía. Mira los ejemplos dados y léelos a fondo.
Ejemplo 1:
Ahora, realizamos nuestro primer ejemplo abriendo el nuevo archivo en el software de código de Visual Studio. En el código de Visual Studio, cuando creamos un nuevo archivo, tenemos una opción para seleccionar el idioma. Seleccionamos el HTML. Primero, construimos el código HTML. El código de Visual Studio nos proporciona la instalación para obtener las etiquetas básicas automáticamente simplemente colocando "!"Y luego presionando" Enter ". Entonces, utilizamos esta instalación y obtenemos todas estas etiquetas básicas.
Ahora, comience desde el cuerpo y agregue un contenedor "Div" llamado "Image Touch-Auto". Dentro de este contenedor "Image Touch Auto", usamos la etiqueta de imagen para agregar la imagen. Aplicamos la propiedad de "acción táctil" a esta imagen. Agregamos la "foto.PNG ”en este código HTML. Después de completar este código, guardamos esto y vamos hacia el archivo CSS. No olvide vincular este archivo CSS al archivo HTML actual. Para vincular los archivos, utilizamos la etiqueta "Enlace" en la propiedad "Cabeza".
Establecemos primero el "cuerpo" y utilizamos la propiedad "Display". El valor que usamos aquí es "Flex", que es un diseño unidimensional. Luego, establecemos la propiedad "Flex-Wrap" en "envolver". Se utiliza para especificar que los elementos de flex están envueltos en múltiples líneas. Después de configurar el cuerpo, avanzamos hacia la "imagen" y comenzamos a utilizar algunas propiedades que necesitamos aquí. Establecimos el DIV llamado "Imagen" "Margen" en "1Rem", y establecemos un valor "500px" para el "ancho" de la "imagen" Div y "500px" para la "altura". También usamos la propiedad de "exceso de flujo" y la establecemos en "desplazarse". Agrega la "barra de desplazamiento" para el Div llamado "imagen". Establecemos su "posición" en "relativo" y utilizamos el "fondo de margen" en "15px". Se usa para especificar el ancho de la parte inferior.
Ahora, tenemos la "imagen img". Entonces, para esto, solo establecemos el "ancho" y la "altura" y establecemos el valor en "600px" para cada uno de ellos. Después de todo esto, usamos la propiedad "Touch-Auto" y establecemos su valor en "Auto". Este auto se usa para mover la imagen en todas las direcciones y proporciona todas las operaciones del navegador, como gestos y panning. Cuando el usuario de la pantalla táctil toca esta pantalla, esta imagen se moverá en todas las direcciones.
Proporcionamos la salida aquí donde mostramos que esta imagen se mueve en todas las direcciones. También tenemos una barra de desplazamiento aquí. Pero cuando el usuario de la pantalla táctil usa esto y toca esta pantalla, él/ella moverá esta imagen en cualquier dirección donde él/ella quiera.
Ejemplo #2:
El código HTML que usamos aquí es el mismo que usamos en el primer ejemplo. Pero en este ejemplo, usamos la propiedad de "acción táctil" con el valor "Pan-Y".
Aquí, establecemos la "Display: Flex" y "Flex-Wrap" para "envolver" el "cuerpo". Luego, establecemos el "margen" como "1Rem" y el "ancho" y "altura" a "700px" y "500px", respectivamente. La palabra clave "Scroll" se establece aquí para la propiedad "Desbordamiento". Y establezca la palabra clave "relativa" para la propiedad "posición" en "15px" en el "fondo de margen". Los valores de "ancho" y "altura" de la imagen aquí son "600px" cada uno. Como discutimos en el ejemplo de gastos generales.
Ahora, utilizamos el valor "Pan-Y" para la propiedad de "acción táctil". Este "Pan-Y" restringe al usuario de la pantalla táctil para mover esta imagen a la dirección y solo. El usuario de la pantalla táctil no moverá esta imagen en la dirección X porque usamos el "Pan-Y" como el valor de esta propiedad de "acción táctil".
En la salida, presentamos solo una barra de desplazamiento para comprender este concepto "Pan-Y" de que solo se moverá en la dirección del eje Y y no en la dirección del eje X.
Ejemplo #3:
Aquí, todo el código es el mismo que en el ejemplo anterior. Pero aquí, utilizamos el "PAN-X" como el valor de la propiedad de "acción táctil". Cuando establecemos el valor de esta propiedad como "PAN-X", restringe al usuario de la pantalla táctil para mover esta imagen solo en la dirección del eje X. Si el usuario quiere mover esta imagen en la dirección del eje y, entonces no sucede nada, y esta imagen no se moverá en la dirección del eje y debido al valor "PAN-X".
Le proporcionamos esta salida para que aprenda este valor "Pan-X" y vea la barra de desplazamiento que le muestra que se mueve solo en la dirección del eje X. Cuando el usuario de la pantalla táctil toca esto y lo mueve al eje x, la imagen se mueve en esta dirección. Pero cuando el usuario de la pantalla táctil mueve esta imagen en la dirección del eje y, la imagen no se moverá en esta dirección del eje Y.
Ejemplo #4:
Cambiamos el código HTML. Aquí, agregamos otra imagen y ponemos algún texto de párrafo en esta imagen. Utilizamos el valor de "pan-derecha" de la propiedad de "acción táctil" en este ejemplo.
Todas las propiedades que utilizamos aquí para el "cuerpo", "imagen" y "imagen img" son las mismas que usamos en los códigos anteriores. Agregamos las nuevas propiedades para el texto que escribimos en la imagen. Establecimos la "posición" del párrafo llamado "Tipo-toque" en "Absoluto" y establecemos su "ancho" en "100%". Alineamos el texto en el "Centro" utilizando el "Alineado de texto" y establecemos la propiedad "Font-Weight" en "Bold", que es una palabra clave aquí. Establecimos el "130px" "superior" para el texto del párrafo.
Después de esto, utilizamos la propiedad de "tamaño de fuente" y colocamos el "24px" como su valor. Cambiamos la "familia de fuentes" de este texto de párrafo a "argelino". Luego, utilizamos el valor "Pan-Right" para la "acción táctil". Cuando este valor se usa para esta propiedad, permite que el usuario de la pantalla táctil mueva el elemento en la dirección correcta solo. Cuando usamos este valor de propiedad, el usuario de la pantalla táctil no moverá este elemento o imagen en ninguna otra dirección, excepto el lado derecho.
Esta salida se proporciona para que pueda aprender sobre el valor "Pan-Right" y ver la barra de desplazamiento, lo que indica que solo viajará en la dirección correcta. La imagen se mueve en esta dirección cuando el usuario de la pantalla táctil lo mueve y la mueve solo al lado derecho y no se mueve en otra dirección. Cuando el usuario de la pantalla táctil use esto, no podrá moverlo a la izquierda, hacia arriba, la derecha o cualquier otra dirección, excepto la dirección correcta.
Conclusión
El propósito de escribir esta guía es darle un concepto claro de la propiedad de "acción táctil" en CSS. Explicamos este concepto en detalle y le proporcionamos los diferentes ejemplos en los que utilizamos esta propiedad de "acción táctil". También utilizamos los diferentes valores para esta propiedad en cada ejemplo. Discutimos que esta propiedad se utiliza para especificar cómo un usuario de pantalla táctil puede controlar la región del elemento. Cuando usamos esta propiedad con diferentes valores, el elemento especificado se moverá de acuerdo con ese valor que establecemos en esta propiedad de "acción táctil". Usamos los cuatro valores diferentes en los cuatro ejemplos diferentes. Los valores restantes funcionan igual que sus nombres que el valor "Pan-Up" se mueve solo en la dirección ascendente. Espero que aprenda esta propiedad CSS de "acción táctil" después del aprendizaje profundo de esta guía, y será útil para usted.