CSS Media Query
Although I had documented this before I did not do so in any depth. Normally the Media Query is used in a Style Sheet (CSS) [internal or external] to modify the rendering of a webpage depending on the screen size. There are other uses the Media Query can be used and an relate to other media such as print and speech.
The Media Query Rule is used extensively by this and pretty much all other websites to ensure "Mobile Friendly" page design. This page has some additional Media Rules to illustrate the effect of the rules in other ways.
The CSS code (style) is shown below with each example.
The first example is taken from the W3C website.
The second is the change the background colour with respect to the orientation of the screen. This is why the background of this page appears as lightblue in landscape (desktop) and lightgreen in portrait (mobile). The example also shows the specificity of CSS definitions as the Media Query acts on the body tag for the whole page.
The third example is just a simple manipulation of the colour of paragraph text when the screen
Finally I have linked a page to the W3C example that I pulled a lot of my code to refine my Responsive Design.
The W3C example for a simple navigation menu
The CSS for the claas="topnav"
<style>
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
<div class="topnav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
Orientation: Portrait / Landscape
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
This will the change color of the text depending on the screen resolution.
<style>
p.example2 {color:red}
@media only screen and (orientation: landscape) {
p.example2 {
color:blue;
}
}
</style>
The W3C Multiple column example
This is where I probably "cribbed" a lot of my responsive code. I changed the [class*="col-"] { ..... to [class*="rcontent-"] { ...... to reflect the class names I had in the preceeding design. (I still don't quite understand this CSS - however, see CSS [attribute*=value] Selector).
There is little point in me making too many changes to the example as I have pretty much taken all that I need from it for my own design. I did change the first menu item to a link back to this page. I also added the additional styling to remove the text-decoration to remove the underscore.
SEO Notes
Having seen that there was a query that found this page that did not make much sense to me I thought that I would add some notes to this and other pages to explain why I think the query and the possible SEO needs to be improved.
The query that found this page was something like CSS Media link. I am not sute what the Internet user was looking for but it didn't seem that it was anything to do with Media Query Rules.