aharris/app.js

## app.js
var App = window.App || {

  beacon: $('.beacon').css('width'),

  // Store the beacon Value
  lastBeacon: this.beacon,

  init: function () {
    // Fire the initial functions for first screen size
    this.getBeacon(this.beacon);
  },

  resize: function () {
    var newBeacon = $('.beacon').css('width');

    // If the screen size has changed fire the functions for the new screen size
    if (this.lastBeacon !== newBeacon) {
      this.lastBeacon = newBeacon;
      this.getBeacon(newBeacon);
    }
  },

  getBeacon: function(beacon) {
    switch(beacon) {
      case "0px":
        this.smallStuff();
        break;
      case "768px":
        this.mediumStuff();
        break;
      case "1024px":
        this.largeStuff();
        break;
      default:
        console.log('Error: No beacon match found');
    }
  },

  smallStuff: function() {
    // Small viewport functions
  },

  mediumStuff: function() {
    // Medium viewport functions

  },

  largeStuff: function() {
    // Large Viewport Functions

  }

};

$().ready(function () {
  App.init();
});

$(window).resize(function () {
  App.resize();
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Responsive JavaScript</title>
</head>
<body>
  <div class="beacon"></div>

  <!-- Include jQuery yourself -->
  <script type="text/javascript" src="jquery-2.1.1.min.js" ></script>
</body>
</html>

## style.css
.beacon {
  display: none;
  width: 0px;
}

/* Medium screen styles */
@media only screen and (min-width: 48em) {
  .beacon {
    width: 768px;
  }
}

/* Large screen styles */
@media only screen and (min-width: 64em) {
  .beacon {
    width: 1024px;
  }
}
	var App = window.App \|\| {

	beacon: $('.beacon').css('width'),

	// Store the beacon Value
	lastBeacon: this.beacon,

	init: function () {
	// Fire the initial functions for first screen size
	this.getBeacon(this.beacon);
	},

	resize: function () {
	var newBeacon = $('.beacon').css('width');

	// If the screen size has changed fire the functions for the new screen size
	if (this.lastBeacon !== newBeacon) {
	this.lastBeacon = newBeacon;
	this.getBeacon(newBeacon);
	}
	},

	getBeacon: function(beacon) {
	switch(beacon) {
	case "0px":
	this.smallStuff();
	break;
	case "768px":
	this.mediumStuff();
	break;
	case "1024px":
	this.largeStuff();
	break;
	default:
	console.log('Error: No beacon match found');
	}
	},

	smallStuff: function() {
	// Small viewport functions
	},

	mediumStuff: function() {
	// Medium viewport functions

	},

	largeStuff: function() {
	// Large Viewport Functions

	}

	};

	$().ready(function () {
	App.init();
	});

	$(window).resize(function () {
	App.resize();
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Responsive JavaScript</title>
	</head>
	<body>
	<div class="beacon"></div>

	<!-- Include jQuery yourself -->
	<script type="text/javascript" src="jquery-2.1.1.min.js" ></script>
	</body>
	</html>
	.beacon {
	display: none;
	width: 0px;
	}

	/* Medium screen styles */
	@media only screen and (min-width: 48em) {
	.beacon {
	width: 768px;
	}
	}

	/* Large screen styles */
	@media only screen and (min-width: 64em) {
	.beacon {
	width: 1024px;
	}
	}