Conéctate con nosotros

Hola que estas buscando?

#Tips

¿Cómo eliminar y agregar elementos dependiendo de la resolución del dispositivo?

En respuesta a las solicitudes, en este artículo cubriré Preguntas de los medios, que es el uso de Tipos de medios con una o más expresiones que involucran características de un medio para definir formatos para diferentes dispositivos. Los navegadores o aplicaciones leen las expresiones definidas en el Consulta, si el dispositivo en cuestión se ajusta a estas solicitudes, el CSS sera aplicado.

Resolución CSS de consultas de medios
Imagen/Reproducción: Lynda


los Tipos de medios definir a qué tipo de medios se dirige un determinado código CSS. El HTML se generó para ser portátil, es decir, leído e interpretado por cualquier tipo de dispositivo. Pero cada dispositivo muestra HTML de una manera diferente, debido a factores como las dimensiones de la pantalla ("resolución"). Suponiendo que acabo de acceder a un sitio web a través de un escritorio, no tendrá la misma reacción que si accedemos a él a través de un dispositivo móvil. Esto se debe a que son dispositivos diferentes y diferentes formas de navegación.

El problema de las Media Queries es que cada vez aparecen más dispositivos con diferentes tamaños y también con hardware muy similar a los de los escritorios, lo que hace que estos dispositivos tengan una navegación casi igual a la de los escritorios. En este caso, puedo citar como ejemplo el iPhone X, su pantalla tiene una calidad excelente y su navegador reproduce las páginas como un navegador de escritorio normal.

Por lo tanto, no es necesario preparar un diseño y un CSS con Media Type Handheld para iPhone, porque a pesar de que es un Mano, no funciona como uno, sin embargo, es importante tener en cuenta que tampoco funciona exactamente como un escritorio. Aunque la representación de Safari es idéntica a la de un escritorio, hay una cuestión de comportamiento del usuario y la forma de navegación que son diferentes. Así que estamos en un punto medio, sin poder proporcionar un CSS específico para Handheld y no un CSS de pantalla completa.

Veamos a continuación cómo debe definir el parámetro que se cargará:


@media screen and (max-width:1024px){.resolucaomenor{display:none}}.resolucaomenor{display:show}

Si lo prefiere (opcional), puede crear un archivo en .CSS y guárdelo en su instancia o en mi solución de inicio: el Blenner SmartCDN. En secuencia, debe insertar en su archivo HTML creado al principio (metadatos):

Después de ingresar los comandos en .CSS, debe "llamar" al comando global donde desea aplicar las nuevas funciones variables, según lo desee. Vea el ejemplo aplicable a una imagen y la división llamada "C":

<c class=”resolucaomenor”><img src=”ENDEREÇO da imagem” alt=&quot;DESCRIPCIÓN&quot; id=”COMANDO adicional (opcional)”></c>

¡Espero haber ayudado! 😀
¡Deja tus comentarios y compártelos con amigos!

Escrito por

Mi nombre es Juan de Souza, tengo 22 años, soy empresario, inversor, blogger, streamer y podcaster. Comencé mi primer negocio a la edad de 10 años, usando una conexión de acceso telefónico en Brasil. Fundé empresas como TFX, Juan de Souza Media, Coliseu Geek, EcoVision, entre otras.

Comentarios

Vea lo que le recomendamos del Blog de Juan:

#Tips

Recientemente, me enfrenté a problemas graves en las horas pico, como: de 9 a 10 a. M. Y de 7 a 9 p. M. Todos los días con ...

#Games

Una de las preguntas más habituales es sobre cómo se realiza el proceso de creación de juegos de plataformas, y pensando en eso decidí crear uno ...

#Insight

Sin duda, en los tiempos que corren los frameworks se han convertido en imprescindibles para el desarrollo de aplicaciones y soluciones en Internet, concretamente para la interfaz “web” ...

#Brasil

Recientemente, Registro.br anunció nuevas extensiones de dominio que se pueden registrar en Brasil para varias categorías de profesionales. Pensando en ello, decidí crear ...