Return to Kroll Design home page

Media queries to detect window size and customize styles accordingly

 
« Return

This heading should only be visible at window widths of 768 or more.

This heading should only be visible at window widths of 767 or less.

The following paragraphs should have blue text at window widths of 768 and above, and it should have red text for window widths of 767 and less:

Mobile device screen resolution continues to improve, but in 2012, screens widths up to and including 767px were assumed to be that of a mobile device, and screen resolutions greater than 767 were considered to be tablets and desktops. So when designing what is called a "responsive" web sites, one school of thought is to design one look/feel for 767 and under, and another look/feel for 768 and above.

This page uses a CSS "Media Query" to test for browser window width. If you right click on this page and select "View Page Source", you'll be able to see the code being used.

If you're viewing this page on a desktop computer, you can view the change in styles and content by maximizing your browser window, then resize it by slowly dragging the lower right corner of the window to the left. As soon as the width of the window is less than 768 pixels, the heading will change slightly, and the paragraph text color will change from blue to red.

So, media queries are a powerful tool which can help make your sites responsive.

Here's the code for this page:


<style>

p { color:blue; }

.show-on-phone {
display: none !important;
}

.hide-on-desktop {
display: none !important;
}

.show-on-desktop {
display: inherit !important;
}

@media (max-width: 767px) {
.hide-from-desktop {
display: inherit !important;
}
.show-on-desktop {
display: none !important;
}
.show-on-phone {
display: inherit !important;
}
.hide-on-phone {
display: none !important;
}

p { color:red;
}

} /* end of media query */

</style>

<h2 class='hide-on-phone'>This heading should only be visible at window widths of 768 or more.</h2>
<h2 class='show-on-phone'>This heading should only be visible at window widths of 767 or less.</h2>

<h4>The following paragraphs should have blue text at window widths of 768 and above, and it should have red text for window widths of 767 and less:</h4>

<p>Mobile device screen resolution continues to improve, but in 2012, screens widths up to and including 767px were assumed to be that of a mobile device, and screen resolutions greater than 767 were considered to be tablets and desktops. So when designing what is called a "responsive" web sites, one school of thought is to design one look/feel for 767 and under, and another look/feel for 768 and above.</p>

<p>This page uses a CSS "Media Query" to test for browser window width. If you right click on this page and select "View Page Source", you'll be able to see the code being used.</p>

<p>If you're viewing this page on a desktop computer, you can view the change in styles and content by maximizing your browser window, then resize it by slowly dragging the lower right corner of the window to the left. As soon as the width of the window is less than 768 pixels, the heading will change slightly, and the paragraph text color will change from blue to red.</p>

<p>So, media queries are a powerful tool which can help make your sites responsive.</p>

 


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/9/2012 8:56 PM