Response.js (ResponseJS.com) uses [0, 320, 481, 641, 961, 1025, 1281] as default 
breakpoint mins, and it uses these to create two sets of data attributes. One is 
for changing the src attribute, and the other is for changing entire blocks of markup:

    - default *src* attributes: data-src0, data-src320, ... data-src1281
    - default *markup* attributes: data-r0, data-r320, ... data-r1281
    
It is possible (and easy) for devs to customize the breakpoints, prefixes, 
mode, etc. using the Response.create() method.

USAGE EXAMPLES

<!-- Example 1
     use hi-res.png @ 1025px+ wide
     use medres.png @ 481px-1025px wide 
     use lo-res.png @ 0-480px (or no-js) -->

    <img src="lo-res.png" src481="medres.png" src1025="hi-res.png" alt="example">


<!-- Example 2    
     basic markup swap example 
	 The applicable attribute replaces the default markup. 
	 The highest applicable attribute is used. --> 
                <div
                    data-r320='markup @ 320+' 
                    data-r481='markup @ 481+'
                    data-r641='markup @ 641+'
                    data-r961='markup @ 961+' 
                    data-r1025='markup @ 1025+' 
                    data-r1281='markup @ 1281+' 
                >
                optional default markup
                </div>


                
<!-- Example 3
     Only serve post WP thumbnails to screens 481px+ wide 
     This could be applied in an archive loop for example.
     Note how esc_attr_e() is used to escape the attribute.
     To prevent mismatched quotes, dynamic values must be escaped. -->

     <div data-r481="<?php esc_attr_e( get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail' ) ) ); ?>"></div>
     
     <!-- ... when the viewport is 481px+, this becomes: -->
     
     <div data-r481="..."><img class="thumbnail" ... /></div>


     
<!-- Example 4
     Only load sidebar for screens 641px+ wide
     This uses some custom PHP functions avail. @link http://responsejs.com/rcore/php/core.php
     (These functions are needed to sanitize quotes, and are droppable into functions.php)
     -->
     
    <div id="primary" class="sidebar aside" data-r641='
            <?php rcore_atomic( 'before_primary' ); #hook ?>
            <?php rcore_sidebar( 'primary' );    #sidebar ?>
            <?php rcore_atomic( 'after_primary' );  #hook ?>
        '>
    </div><!-- #primary .aside -->

    
    
    
<!-- Example 5
     Repsonse.js also provides another way to do Example 4. This way allows you to centralize 
     your code into one file, such as footer.php. 
     -->
     
    <div id="primary" class="sidebar aside"></div><!-- #primary .aside - empty by default -->
    
     <-- ... and then, included into footer.php you might use the lib's methods like this: -->
    
    <script>	
        
        // Define mysidebars()
        function mysidebars() { 
        
            // true when viewport is 641px+ wide
            if ( Response.band(641) ) {
                var primary = "<?php rcore_atomic('before_primary'); rcore_sidebar('primary'); rcore_atomic('after_primary');  ?>";
            }
            else { var primary = ''; }

            // replace markup using jQuery's html() method 
            $('#primary').html(primary);
            
        }//function
        
        // Execute mysidebars() when the DOM is ready and if/when the window is resized"
        Response.action( mysidebars ); // similar in concept to add_action.
        
    </script>