Skip to content

Latest commit

 

History

History
75 lines (63 loc) · 2.55 KB

usage.rst

File metadata and controls

75 lines (63 loc) · 2.55 KB

Usage

django-responsive2 lets you to define the breakpoints at which your layout will change, adapting to different screen sizes. Here's the default breakpoints:

RESPONSIVE_MEDIA_QUERIES = {
    'small': {
        'verbose_name': _('Small screens'),
        'min_width': None,
        'max_width': 640,
    },
    'medium': {
        'verbose_name': _('Medium screens'),
        'min_width': 641,
        'max_width': 1024,
    },
    'large': {
        'verbose_name': _('Large screens'),
        'min_width': 1025,
        'max_width': 1440,
    },
    'xlarge': {
        'verbose_name': _('XLarge screens'),
        'min_width': 1441,
        'max_width': 1920,
    },
    'xxlarge': {
        'verbose_name': _('XXLarge screens'),
        'min_width': 1921,
        'max_width': None,
    }
}

** Borrowed from ZURB Foundation framework, see http://foundation.zurb.com/docs/media-queries.html

While there are several different items we can query on, the ones used for django-responsive2 are min-width, max-width, min-height and max-height.

  • min_width — Rules applied for any device width over the value defined in the config.
  • max_width — Rules applied for any device width under the value defined in the config.
  • min_height — Rules applied for any device height over the value defined in the config.
  • max_height — Rules applied for any device height under the value defined in the config.
  • pixel_ratio — Rules applied for any device with devicePixelRatio defined in the config.

You can override the default media queries by defining own in your RESPONSIVE_MEDIA_QUERIES in your settings.py. For example:

RESPONSIVE_MEDIA_QUERIES = {
    'iphone': {
        'verbose_name': _('iPhone Retina'),
        'min_width': 320,
        'pixel_ratio': 2
    },
    ...
}

For every media queries, the device object will have a is_FOO attribute, where FOO is the name of the media query. This attribute returns True/False.

Continuing with the example RESPONSIVE_MEDIA_QUERIES settings above, here’s a simple corresponding template:

<div class="container">
    <div class="row">
        {% if device.is_iphone %}
            {# this snippet will only be rendered for retina devices with min_width = 320 #}
            <div class="app-store">
                <a href="#">Available on the App Store</a>
            </div>
        {% endif %}
    </div>
</div>