Pregunta sobre CSS Media Query

Tengo una pregunta sobre la consulta de CSS.

Estoy implementando una página HTML usando desktop.css y ipad.css y las quiero en 2 archivos separados. En desktop.css, utilizo @import url (“ipad.css”); y también agregue @media no solo la pantalla y el bloque (ancho del dispositivo: 768px) que tiene los estilos de escritorio reales.

Así que parece que desktop.css

@import url("ipad.css"); @media not only screen and (device-width:768px) { //Desktop styles } 

Ahora, mientras que el iPad CSS se aplica correctamente en el iPad, por alguna razón no se aplica el CSS para el escritorio. No estoy seguro de qué está mal con la “@media no solo la pantalla …”

Me referí a http://www.w3.org/TR/css3-mediaqueries

y dice “La presencia de la palabra clave ‘no’ al comienzo de la consulta de medios niega el resultado. Es decir, si la consulta de medios hubiera sido verdadera sin la palabra clave ‘no’ se volverá falsa, y viceversa”.

Pero por alguna razón, el escritorio nunca procesa los estilos … Por favor ayuda … Gracias ..

** * **** EDITADO * *

¿Cuál podría ser el problema con el uso de este enfoque?

 @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px); 

¿Has probado algo como

@media only screen and (device-width: 768px) { /* desktop styles here */ }

Entonces, pierda el not porque eso es lo que hace que la regla se aplique a todo menos a la pantalla, es decir, el escritorio en su caso.

El siguiente enlace podría ser útil. consultas de medios en developer.mozilla.org consultas de medios en css3.info

only screen significa que solo la pantalla y nada más representa esto. El not niega esto para que todo menos la screen lo represente.

Hazlo de esta manera:

   

Donde desktop.css se inicia sin ninguna regla de @ media query, y ipad.css comienza con la @media screen and (max-width: 768px) {/*your code here*/} .

O simplemente enlace a ambos como lo haría normalmente, teniendo ipad.css debajo de desktop.css.

   

Donde también se inicia el archivo desktop.css sin ningún @ reglas de medios y ipad.css comienza con una @media screen and (max-width: 768px) {/*your code here*/} regla.

De esta forma, todos los navegadores de escritorio leerán el archivo desktop.css, y los navegadores que admitan consultas de medios también leerán ipad.css (cuando la resolución de la pantalla sea inferior a 768px).

Si los usa tal como lo describe en su edición, IE8 y siguientes lo desordenarán, está bien explicado en este artículo => http://dev.opera.com/articles/view/safe-media-queries/

Y si quiere que IE también cambie el tamaño y entienda sus consultas de medios, la única forma de resolver el problema es mediante el uso de esta biblioteca ligera de JavaScript => http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ que hará la magia para usted (y básicamente hace posible trabajar con IE como con un navegador normal) 🙂

El problema es que solo puedes hacer que IE ignore las consultas de los medios para que no estropee el aspecto de tus sitios. Para que IE entienda las consultas de los medios y cambie el tamaño y la adecuación con los cambios en el tamaño de la ventana, necesita la ayuda de la biblioteca que menciono.