I’ve found it handy during the development of responsive CSS to know what stylesheet or media query is active.
The following is an example of how to dynamically add labels to a page.
@media screen and (max-width:600px) {
.site-time p::after {
content:" (0-600px)";
}
}
@media (min-width: 601px) and (max-width: 800px) {
.site-time p::after {
content:" (601-800px)";
}
}
I’ve picked an element that was in every variant of the site layout, and appended some text indicating the active sheet.