من قبل
Mohammed Ali AL-Malahi , Software Engineer and Deputy Supervisor for the Application Management Unit , King AbdulAziz University
The CSS media query syntax for calling an external stylesheet is like this:
You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". The media attribute can be brought directly inside a CSS file, like this:
@media screen {
body {
width:75%;
}
}
@media print {
body {
width:100%;
}
}
Likewise, you can use more advanced CSS media queries like:
@media all and (max-width:699px) and (min-width:520px), (min-width:1151px) {
body {
background: #ccc;
}
}
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. Thenot keyword can be used to alter the logic as well.
Example
Let's say we have a fluid width design where the sidebar is35% of the width of the page. That means depending on the width of the browser window, that sidebar could be quite narrow or quite wide, that's just the nature of fluid width designs. With CSS media queries, we can say "if the browser is really narrow, do this, if it's wider, do this, if it's really wide, do this." Note that measuring width isn't the only thing media queries can do, it's just a particularly practical example.
In our example sidebar, we are going have a list of names of the Super Team which function as email links. The HTML is fairly simple:
It's just a list of links. The href attribute is a mailto: link. The only thing you might find unusual is the data-email attribute. In HTML5, you can use attributes prefixed with data- to store information, and it's perfectly valid. We are going to want to use that data later, but the href value isn't quite what we need having thatmailto: link, hence the data attribute.
The default styling for the list will be this:
#sidebar ul li a {
color: #900;
text-decoration: none;
padding:3px0;
display: block;
}
