Las consultas de medios permiten la aplicación condicional de estilos CSS según los tipos de medios, como la pantalla y la impresión, y las condiciones de las características de los medios, como la ventana gráfica y la altura y el ancho del dispositivo. Son parte de la especificación W3C CSS3.
Al escribir una consulta de medios CSS, ¿hay alguna forma de 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 screeny only screenen las consultas de los medios? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> ¿Por qué estamos obligados a...
He estado investigando sobre consultas de medios y todavía no entiendo cómo apuntar a dispositivos de ciertos tamaños. Quiero poder apuntar a computadoras de escritorio, tabletas y dispositivos móviles. Sé que habrá algunas discrepancias, pero sería bueno tener un sistema genérico que pueda...
Estoy usando Bootstrap 3 para construir un diseño receptivo donde quiero ajustar algunos tamaños de fuente de acuerdo con el tamaño de la pantalla. ¿Cómo puedo usar consultas de medios para hacer este tipo de
Me gustaría usar consultas de medios para cambiar el tamaño de los elementos en función del tamaño de un divelemento en el que se encuentran. No puedo usar el tamaño de la pantalla, ya divque solo se usa como un widget dentro de la página web, y su tamaño puede variar. Actualizar Parece que ahora...
Necesito cargar dinámicamente imágenes de banner en una aplicación HTML5 y quisiera un par de versiones diferentes para adaptarse a los anchos de pantalla. No puedo determinar correctamente el ancho de pantalla del teléfono, por lo que la única forma en que puedo pensar en hacerlo es agregar...
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á pasando en la primera
Necesito desarrollar algunas páginas html para teléfonos iphone / android, pero ¿cuál es la diferencia entre max-device-widthy max-width? Necesito usar diferentes CSS para diferentes tamaños de pantalla. @media all and (max-device-width: 400px) @media all and (max-width: 400px) ¿Cual es la...
Tengo esta @mediaconfiguración: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /*...
Tengo un sitio grande que se ejecuta en ASP.NET MVC usando el motor de vista Razor. Tengo una hoja de estilo base que contiene todo el estilo genérico para todo el sitio. En ocasiones, sin embargo, tengo estilos específicos de página que, en <head>general, son una o dos líneas. No me gusta...
Estoy usando Twitter Bootstrap en un proyecto. Además de los estilos de arranque predeterminados, también he agregado algunos de los míos. //My styles @media (max-width: 767px) { //CSS here } También estoy usando jQuery para cambiar el orden de ciertos elementos en la página cuando el ancho de...
En styles.css, estoy usando consultas de medios, los cuales usan una variación de: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Los sitios cambian de tamaño al diseño que...
¿IE8 no admite la siguiente consulta de medios CSS: @import url("desktop.css") screen and (min-width: 768px); Si no, ¿cuál es la forma alternativa de escribir? Lo mismo funciona bien en Firefox. ¿Algún problema con el código a continuación? @import url("desktop.css") screen; @import...
Soy nuevo aquí en esta compañía y tenemos un producto que utiliza millas de CSS. Estoy intentando hacer una hoja de estilo imprimible para nuestra aplicación, pero estoy teniendo problemas con background-coloren @media print. @media print { #header{display:none;} #adwrapper{display:none;} td...
En la documentación de consultas de medios de Bootstrap 3 dice: Utilizamos las siguientes consultas de medios en nuestros archivos Less para crear los puntos de interrupción clave en nuestro sistema de cuadrícula. Dispositivos extra pequeños (teléfonos, menos de 768 px): no hay consulta de...
En JavaScript, el modo de orientación se puede detectar usando: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Sin embargo, ¿hay alguna forma de detectar la orientación usando solo CSS? P.ej. algo como: @media only screen and (width > height)...
Estoy tratando de usar consultas de medios CSS3 para crear una clase que solo aparece cuando el ancho es mayor que 400 px y menor que 900 px. Sé que esto es probablemente extremadamente simple y me falta algo obvio, pero no puedo entenderlo. Lo que se me ocurrió es el siguiente código, agradezco...
Estoy tratando de usar variables CSS en la consulta de medios y no funciona. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint))
El iPhone 5 tiene una pantalla más larga y no capta la vista móvil de mi sitio web. ¿Cuáles son las nuevas consultas de diseño receptivo para el iPhone 5 y puedo combinarlas con las consultas existentes de iPhone? Mi consulta de medios actual es esta: @media only screen and (max-device-width:...
¿Hay alguna manera de obtener el ancho del dispositivo de los usuarios, en lugar del ancho de la ventana gráfica, usando JavaScript? Las consultas de medios CSS ofrecen esto, como puedo decir @media screen and (max-width:640px) { /* ... */ } y @media screen and (max-device-width:960px) { /*...