diff --git a/README.md b/README.md index d23119a..201c4de 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Here is a simple FitText setup: ``` @@ -18,8 +18,8 @@ Your text should now fluidly resize, by default: Font-size = 1/10th of the eleme If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is `1`. ```javascript -jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively) -jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively) +jQuery('#responsive_headline').fitText(1.2); // Turn the compressor up (resizes more aggressively) +jQuery('#responsive_headline').fitText(0.8); // Turn the compressor down (resizes less aggressively) ``` This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely. @@ -28,7 +28,14 @@ This will hopefully give you a level of "control" that might not be pixel perfec FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. ```javascript -jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); +jQuery('#responsive_headline').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); +``` + +## With matchMedia +FitText allows you to pass in a `matchMedia` option that uses Paul Irish's [matchMedia.js](https://github.com/paulirish/matchMedia.js/) (if it's available - so you'll need to include it separately) and only runs fitText if the criteria matches. + +```javascript +jQuery('#responsive_headline').fitText(1.2, { matchMedia: 'only screen and (min-width: 500px)' }); ``` ## CSS FAQ diff --git a/example.html b/example.html index c6a2aee..4ba5cc5 100644 --- a/example.html +++ b/example.html @@ -32,6 +32,9 @@ #d45848 -4px 4px 0; margin: 5% auto 5%; } + h1#fittext4 { + font: 44px/1 "Impact"; + } @@ -44,16 +47,22 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ + + +