Articles of consultas de medios

Detecta si se usa un navegador en un dispositivo móvil (teléfono / tableta iOS / Android)

¿Hay alguna forma de detectar si se usa un navegador portátil (teléfono / tableta iOS / Android)? Intenté esto con el objective de hacer un elemento la mitad de ancho en un navegador en un dispositivo portátil, pero no hace la diferencia. width: 600px; @media handheld { width: 300px; } ¿Se puede hacer y si […]

¿Las consultas de medios de CSS min-width y min-device-width están en conflicto?

Soy muy nuevo en el mundo de las consultas sobre medios, y está claro que me falta algo fundamental acerca de la diferencia entre el ancho y el ancho del dispositivo, además de sus obvias capacidades de orientación. Me gustaría orientarme tanto a computadoras comunes como a dispositivos con los mismos puntos de interrupción, por […]

@Media min-width & max-width

Tengo esta configuración de @media : HTML : CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } Con esta configuración, funciona en el iPhone pero […]

¿Qué significa @media screen y (max-width: 1024px) en CSS?

Encontré este fragmento de código en un archivo CSS que heredé, pero no puedo entenderlo: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Específicamente, ¿qué está sucediendo en la primera línea?

Consultas de medios para iPhone 6 y 6 Plus

¿Alguien sabe tamaños de pantalla específicos para dirigirse a consultas de medios para iPhone 6 y 6 Plus? Además, ¿el tamaño de los icons y las pantallas de bienvenida?

Anidar reglas @media en CSS

El soporte parece ser diferente en todos los navegadores. Verifique el enlace Firefox: negro con texto blanco. Opera, Chrome, IE9: azul con texto negro. ¿Cuál es correcto y cómo lo haré consistente? El código @media screen and (min-width: 480px) { body{ background-color:#6aa6cc; color:#000; } @media screen and (min-width: 768px) { body{ background-color:#000; color:#fff; } } […]

Consultas de medios CSS: ancho máximo O altura máxima

Al escribir una consulta de medios CSS, ¿hay alguna forma de que pueda especificar varias condiciones con la lógica “O”? Estoy intentando hacer algo como esto: /* This doesn’t work */ @media screen and (max-width: 995px OR max-height: 700px) { … }

¿Cuál es la diferencia entre “pantalla” y “única pantalla” en consultas de medios?

¿Cuál es la diferencia entre “pantalla” y “única pantalla” en consultas de medios? ¿Por qué estamos obligados a usar ‘ Solo ‘? ¿La screen no proporciona suficiente información para ser renderizada solo para Screen? He visto muchos sitios web receptivos. Algunos usan @media screen and (max-width:632px) Algunos @media (max-width:632px) y algo @media only screen and […]

Problemas de impresión de CSS @media con color de fondo;

Soy nuevo aquí en esta empresa y tenemos un producto que usa millas de CSS. Estoy intentando hacer una hoja de estilos imprimible para nuestra aplicación, pero tengo problemas con el color de fondo en @media print … @media print { #header{display:none;} #adwrapper{display:none;} td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}} todo lo demás funciona, puedo […]

¿Pueden las consultas de medios cambiar el tamaño en función de un elemento div en lugar de la pantalla?

Me gustaría usar consultas de medios para cambiar el tamaño de los elementos en función del tamaño de un elemento div que se encuentren. No puedo usar el tamaño de pantalla ya que el div solo se usa como un widget dentro de la página web, y su tamaño puede variar. Actualizar Parece que se […]