Current Resolution: 1280×720

rwdjs is deprecated

I now recommend the use of enquire.js.

View on GitHub
In this example, we use 3 rules. Note that both paragraphs are hidden by default with CSS.
  1. One rule to show the "small" paragraph if the resolution is 320px or less
  2. One rule to show the "large" paragraph if the resolution is more than 320px
  3. And a final rule to change the text of the "large" paragraph to "Extra Large!" if the resolution is more than 1024px

Extra large!

Small

A more realistic example might be that on a smaller screen, we wish to display content inline while on a larger screens we wish to use jQuery UI tabs. (Hiding the UL is done with CSS!)

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel molestie orci. Nam efficitur lorem sollicitudin odio consectetur, a pretium eros volutpat. Etiam elementum, elit quis tristique ullamcorper, erat erat suscipit eros, in laoreet justo quam non justo. Suspendisse auctor in nulla feugiat convallis. Nullam at porttitor diam. Praesent semper, massa in eleifend lobortis, purus tellus scelerisque urna, in ultrices erat augue dapibus augue. Aenean molestie vel diam sed malesuada. Aenean vestibulum lacus dui, in faucibus purus feugiat sed. Quisque felis ex, porta ut enim pulvinar, mattis convallis dui.