mirror of
https://github.com/jbrewer/Responsive-Measure.git
synced 2026-04-22 03:00:19 -04:00
48 lines
1.2 KiB
Markdown
48 lines
1.2 KiB
Markdown
_This plugin is no longer supported. Leaving things up so I don't cause more link rot._
|
|
|
|
|
|
Responsive-Measure
|
|
==================
|
|
|
|
A jQuery plugin for generating a responsive ideal measure.
|
|
|
|
## Getting Started
|
|
Download the [`javascript`](https://raw.github.com/jbrewer/Responsive-Measure/master/jquery.rm.js)
|
|
|
|
In your web page:
|
|
|
|
```html
|
|
<script src="jquery.js"></script>
|
|
<script src="jquery.rm.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
$('section').responsiveMeasure({
|
|
// Variables you can pass in:
|
|
idealLineLength: (defaults to 66),
|
|
minimumFontSize: (defaults to 16),
|
|
maximumFontSize: (defaults to 300),
|
|
ratio: (defaults to 4/3)
|
|
});
|
|
|
|
</script>
|
|
```
|
|
|
|
### Extended feature(s)
|
|
|
|
This plugin includes a feature for generating a typographic scale that you can apply automagically on resize.
|
|
|
|
```html
|
|
$(document).on('responsiveMeasureUpdated', function(e, data) {
|
|
$('.giga').css('fontSize', data.fontRatios[9] + 'px');
|
|
$('h1').css('fontSize', data.fontRatios[8] + 'px');
|
|
$('h2').css('fontSize', data.fontRatios[7] + 'px');
|
|
$('h3').css('fontSize', data.fontRatios[6] + 'px');
|
|
$('p').css('fontSize', data.fontRatios[5] + 'px');
|
|
$('.sm').css('fontSize', data.fontRatios[4] + 'px');
|
|
});
|
|
```
|
|
|
|
## License
|
|
Copyright (c) 2012 Josh Brewer
|
|
Licensed under the MIT, GPL licenses.
|