guido4000/jsbin.qisiw.css

## jsbin.qisiw.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.qisiw.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ember responsive" />
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
  <script src="https://rawgit.com/freshbooks/ember-responsive/master/dist/ember-responsive.js"></script>
</head>
<body>

  <script type="text/x-handlebars" data-template-name="index">
    {{#if media.isMobile}} <p>Mobile!</p> {{/if}}
    {{#if isBetween}} <p>Medium!</p> {{/if}}
    {{#if media.isBig}} <p>Big!</p> {{/if}}
    {{#if media.isHidipi}} <p>Hidipi!</p> {{else}} <p>No Hidipi :-(</p> {{/if}}
    {{#if media.isFirefox}} <p>Firefox</p> {{/if}}
    {{#if media.isChrome}} <p>Chrome</p> {{/if}}
  </script>

  <script type="text/x-handlebars">
    <h2>Ember-Responsive</h2>

    {{outlet}}

    <p>
      <em>The goal of <a href="https://freshbooks.github.io/ember-responsive/">ember-responsive</a>
         is to give you a simple, Ember-aware way
         of dealing with media queries. All you need to do is tell it your
         application's breakpoints and it'll expose the rest for you.
      </em>
    </p>
    <p>
      <em>This page has breakpoints at 800px wide, 400px wide,
        200px wide, and 200px tall. It also toys with detecting
        browers and DPI capabilities.
      </em>
    </p>
  </script>

</body>
</html>

## jsbin.qisiw.js
// https://freshbooks.github.io/ember-responsive/

Application = Ember.Application.extend();

Application.responsive({
  media: {
    short:   '(max-height: 200px)',
    tiny:    '(max-width: 200px)',
    mobile:  '(max-width: 400px)',
    big:     '(min-width: 800px)',

    // Example only works with Chrome and Firefox
    hidipi:  '(-webkit-min-device-pixel-ratio: 1.5), '+
             '(min--moz-device-pixel-ratio: 1.5)',

    // Please do not do this
    firefox: '(min--moz-device-pixel-ratio: 0.1)',
    chrome:  '(-webkit-min-device-pixel-ratio: 0.1)'
  }
});

var App = Application.create();

App.IndexController = Ember.Controller.extend({

  isBetween: xor('media.isMobile', 'media.isBig'),

  changedTiny: function(){
    if (!this.get('media.isTiny')) { return; }
    alert('Too small!!!!!!!');
  }.observes('media.isTiny'),

  changedShort: function(){
    if (!this.get('media.isShort')) { return; }
    alert('Too short!!!!!!!');
  }.observes('media.isShort')

});

function xor(propA, propB){
  return Ember.computed(propA, propB, function(){
    return (
      !this.get(propA) &&
      !this.get(propB)
    );
  });
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="ember responsive" />
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
	<script src="https://rawgit.com/freshbooks/ember-responsive/master/dist/ember-responsive.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars" data-template-name="index">
	{{#if media.isMobile}} <p>Mobile!</p> {{/if}}
	{{#if isBetween}} <p>Medium!</p> {{/if}}
	{{#if media.isBig}} <p>Big!</p> {{/if}}
	{{#if media.isHidipi}} <p>Hidipi!</p> {{else}} <p>No Hidipi :-(</p> {{/if}}
	{{#if media.isFirefox}} <p>Firefox</p> {{/if}}
	{{#if media.isChrome}} <p>Chrome</p> {{/if}}
	</script>

	<script type="text/x-handlebars">
	<h2>Ember-Responsive</h2>

	{{outlet}}

	<p>
	<em>The goal of <a href="https://freshbooks.github.io/ember-responsive/">ember-responsive</a>
	is to give you a simple, Ember-aware way
	of dealing with media queries. All you need to do is tell it your
	application's breakpoints and it'll expose the rest for you.
	</em>
	</p>
	<p>
	<em>This page has breakpoints at 800px wide, 400px wide,
	200px wide, and 200px tall. It also toys with detecting
	browers and DPI capabilities.
	</em>
	</p>
	</script>

	</body>
	</html>
	// https://freshbooks.github.io/ember-responsive/

	Application = Ember.Application.extend();

	Application.responsive({
	media: {
	short: '(max-height: 200px)',
	tiny: '(max-width: 200px)',
	mobile: '(max-width: 400px)',
	big: '(min-width: 800px)',

	// Example only works with Chrome and Firefox
	hidipi: '(-webkit-min-device-pixel-ratio: 1.5), '+
	'(min--moz-device-pixel-ratio: 1.5)',

	// Please do not do this
	firefox: '(min--moz-device-pixel-ratio: 0.1)',
	chrome: '(-webkit-min-device-pixel-ratio: 0.1)'
	}
	});

	var App = Application.create();

	App.IndexController = Ember.Controller.extend({

	isBetween: xor('media.isMobile', 'media.isBig'),

	changedTiny: function(){
	if (!this.get('media.isTiny')) { return; }
	alert('Too small!!!!!!!');
	}.observes('media.isTiny'),

	changedShort: function(){
	if (!this.get('media.isShort')) { return; }
	alert('Too short!!!!!!!');
	}.observes('media.isShort')

	});

	function xor(propA, propB){
	return Ember.computed(propA, propB, function(){
	return (
	!this.get(propA) &&
	!this.get(propB)
	);
	});
	}