CSS Media Queries – An Introduction

Well it seems to be out of context but believe me if you want to be a good Siebel developer you must have a good knowledge of Media Queries as well.
Its not a brand new technology, its available from CSS 2.0 only. Now in CSS 3.0 its fully grown up with tons of features to use.
With a @media query, you can write different CSS code for different media types.

CSS Syntax
@media not|only mediatype and (media feature) {
CSS-Code;
}
Media Type can be all|| Screen || Print
We can use this to download css files based on media types.The CSS media query syntax for calling an external stylesheet is like this:

<link rel='stylesheet'
media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Example:

@media screen {
body {
width: 75%;
}
}
@media print {
body {
width: 100%;
}
}

Html body width will be different for screen and printers.

Logic in Media Queries

If

That’s what media queries are: logical if statements. “If” these things are true about the browser, use the CSS inside.

And

The keyword and.

@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}

Or

Comma separate.

@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}

Technically these are treated like two separate media queries, but that is effectively or.

Not

Reverse the logic with the keyword not.

@media not all and (max-width: 600px) {
html { background: red; }
}

Don’t get confused between min-width and max-width conditional statements .

Min-Width

@media only screen and (min-width: 330px)  {...}

Here’s what that actually means:
“If [device width] is greater than or equal to [specified #], then do {…}”

So if the actual “device width” is 320px this condition will return false.

Max-Width

@media only screen and (max-width: 330px)  {...}

Translates to:
“If [device width] is less than or equal to [specified #], then do {…}”

So based on this second example, if the “device width” is 320px the condition is true:

@media only screen and (min-width:480px) and (max-width: 640px)  {...}
@media only screen and (max-width: 479px)  {...}

The first one is saying anything greater than 480px and less than 640px, the other is simply stating anything less than 479px.

You can find a live example here, change screen size to see the magic of media queries. I would love to implement an example in siebel application. May be in next post.

[su_divider style=”dotted”]

@AskmeSiebel