CSS 3 Media Queries can adjust CSS settings. For instance, one can make sections narrower or wider, or choose to hide them, depending on the window width and device type.
A.E.Veltstra
Sunday, January 11, 2009
For the homepage of this website, I added CSS Media Queries like the following:
This means that the regular 3 column layout on that page is reduced to a 2-column layout when the width of the window drops beneath 500px.
Browser support:
- Opera Mini 4.2 reacts to these queries mostly. (It seems to ignore a specific query for handheld devices. I have to look into that.)
- Opera 9.6 and Firefox 3.1 (Shiretoko) react to these queries on the fly: resize the window and you will notice the changes immediately.
- Firefox 3 and Internet Explorer 6 ignore them. (Internet Explorer 6 does not understand "max-width" and "min-width".) (Firefox 3 does not understand CSS sent in the UTF-8 charset when generated by PHP: it assumes the page is sent as text/html instead of text/css. The file has to be saved and identified as using the iso-8859-1 charset to solve. The other browsers tested do not have this problem.)
- Google Chrome reacts to the Media Queries after reloading the page.
Other browsers will be tested when available.
@media all and (max-width: 500px) {
body { min-width: 0; padding: 0.5mm }
.row { display: block }
header, .header, .hello, aside, .aside, article, .article, .miniSitemap, address { display: block }
aside { width: 100%; margin: 0 0 2mm 0; padding: 0; }
aside .aside { width: 100%; margin: 0; }
.topic { padding: 1mm }
.io button { margin-right: 1mm }
.miniSitemap li { display: list-item; float: none; width: auto }
.miniSitemap li a { width: auto }
}This means that the regular 3 column layout on that page is reduced to a 2-column layout when the width of the window drops beneath 500px.
Browser support:
- Opera Mini 4.2 reacts to these queries mostly. (It seems to ignore a specific query for handheld devices. I have to look into that.)
- Opera 9.6 and Firefox 3.1 (Shiretoko) react to these queries on the fly: resize the window and you will notice the changes immediately.
- Firefox 3 and Internet Explorer 6 ignore them. (Internet Explorer 6 does not understand "max-width" and "min-width".) (Firefox 3 does not understand CSS sent in the UTF-8 charset when generated by PHP: it assumes the page is sent as text/html instead of text/css. The file has to be saved and identified as using the iso-8859-1 charset to solve. The other browsers tested do not have this problem.)
- Google Chrome reacts to the Media Queries after reloading the page.
Other browsers will be tested when available.
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.