Auto Change Font Size On Window Resize - fontConvertRatio

File Size: 3.53 KB
Views Total: 755
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Change Font Size On Window Resize - fontConvertRatio

fontConvertRatio is a dead simple and extremely lightweight jQuery plugin to convert the font size of your text within a specified container.

The plugin can be used to automatically increase or decrease the font size of the text on window resize.

How to use it:

1. Include the JavaScript file fontconvert.js after jQuery but before the </body> tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="fontconvert.js"></script>

2. Convert the font size of your text.

<div class="w">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, adipisci. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus consequuntur eligendi necessitatibus perspiciatis autem eaque explicabo, in beatae vel mollitia quis eos animi sunt consectetur corporis doloremque quisquam. At quod in porro eum amet esse corrupti! Ipsum dolores placeat est?</div>
$(function(){

  // converter(selector,pixel)
  converter('.w',40);

});

3. Auto-scale the font size on window resize.

window.addEventListener('resize', function (event) {
  converter('.w',40);
});

This awesome jQuery plugin is developed by fahreyad. For more Advanced Usages, please check the demo page or visit the official website.