Geek Answers Handbook

CSS Media Query Question

I have a question about a request for CSS material ..

I am implementing an HTML page using desktop.css and ipad.css and want them in 2 separate files. In desktop.css, I am using @import url ("ipad.css"); and also add @media not only the screen and (device width block: 768 pixels), which has actual desktop styles.

So desktop.css looks like

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

Now that iPad CSS is correctly applied on the iPad, for some reason CSS for the desktop is not applied. Not sure what's wrong with "@media is not just a screen ..."

I called http://www.w3.org/TR/css3-mediaqueries

and he says, “Having a keyword” not at the beginning of the media query denies the result. That is, if the media query was true without the "keyword", it will become false and vice versa. "

But for some reason, the desktop never creates styles ... Please help .. Thanks ..

******* EDITED **

What could be the problem when using this approach?

 @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
+2
source share
4 answers

Have you tried something like

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

So, lose not , as this makes the rule applicable to everything except the screen, i.e. the desktop, in your case.

0
source

The following link may be helpful. developer.mozilla.org media queries css3.info media queries

+1
source

only screen means only the screen and does nothing. not denies this so that everyone except screen displays it.

0
source

Do it like this:

  <style type="text/css"> @import url("desktop.css"); @import url ("ipad.css"); </style>

Where desktop.css starts without any @media query rules and ipad.css starts with @media screen and (max-width: 768px) {/*your code here*/} .

Or just a link to both, as usual, with ipad.css below desktop.css.

 <link rel="stylesheet" type="text/css" href="css/desktop.css"/> <link rel="stylesheet" type="text/css" href="css/ipad.css"/>

Where you also run the desktop.css file without any @media rules, and ipad.css starts with the @media screen and (max-width: 768px) {/*your code here*/} rule.

Thus, all desktop browsers will read the desktop.css file, and browsers that support multimedia requests will also read ipad.css (when the screen resolution is below 768 pixels).

If you use them as you describe in your editing, IE8 and below will be useless, this is well explained in this article => http://dev.opera.com/articles/view/safe-media-queries/

And if you want IE to also resize and understand your media queries, the only way to solve this problem is to use this lightweight JavaScript library => http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ which will do the magic for you (and basically allows you to work with IE IE with a normal browser) :)

The problem is that you can only IE ignore media requests so that it does not spoil your sites. In order for IE to understand media queries and resize and understand changes in window size, you need help from the library that I mention.

0
source

More articles:


All Articles