<article id="hidpi-media-query">
  <h2>HIDPI Media Query <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss">View source</a></h2>
  <p>The HIDPI Meda Query will allow you to generate a media query that targes HIDPI devices. It accepts a ratio argument, default is 1.3. <a href="http://bjango.com/articles/min-device-pixel-ratio/">Find my device pixel ratio.</a></p>

{% highlight scss %}
@include hidpi-media-query (1.5) {
  width: 260px;
}
{% endhighlight %}

<h3>CSS Output</h3>
{% highlight scss %}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 260px;
}
{% endhighlight %}

</article>

<article id="hidpi-media-query">
  <h2>HIDPI Media Query <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss">View source</a></h2>
  <p>The HIDPI Meda Query will allow you to generate a media query that targes HIDPI devices. It accepts an optional ratio argument, default ratio is 1.3. <a href="http://bjango.com/articles/min-device-pixel-ratio/">Find my device pixel ratio.</a></p>

{% highlight scss %}
@include hidpi(1.5) {
  width: 260px;
}
{% endhighlight %}

<h3>CSS Output</h3>
{% highlight scss %}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 260px;
}
{% endhighlight %}

</article>

Fix the hidpi media query docs
Fix the hidpi media query docs
