The script is made with jQuery and has been adapted with the latest jQuery version which is above 3.x. You may use it with an old jQuery version as long as you add the jQuery migrate tool to merge both jQuery source together. The implementation is simple and only requires the jQuery source, the script source and an initialization function to start the process.

The first step consist of adding your jQuery version which will required the latest to run.

The line of code for the correct jQuery version should look like that:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

The next step consist of adding the responsify script which should add all the required function in order to do the resizing magic.

The line of code for the script insertion for the record:

<script src="../responsify.js"></script>

The last step is to configure the script with the default data to use when initializing it. Here is an example of a default configuration that may work on most design:

<script type="text/javascript">

jQuery(document).ready(function($) {

$('body').responsify({

max_width: {

lg: 1200,
md: 979,
sm: 768,
xs: 480

},
text_scaling: {

lg: 1200,
md: 979,
sm: 768,
xs: 480

},
conserve_columns: 0,
background_size: '100'

});

});

</script>

The large max-width will be the one used when rendering the site full width. If your site is smaller than this defined width, it will be resized to full width. Therefore any images and background will adjust to the current max-width and above. The smaller widths are used for other devices as computer such as a tablet and a phone. You will have 4 choices of grid size. Those are required to be set for the initialization.

The text scaling works just like the max-width section. This option is used to resize any font there is to a smaller ratio for the width defined within this setting. The ratio are 100%, 75%, 50% and 25%. The fonts are resizing accordingly as they appear when first rendered. Their size are taken from the CSS.

The conserve columns feature comes useful when you want to keep the current width of your columns and avoid adjusting them with percentages. When you set it to 0, the columns or section within the desktop and tablet view won’t be resized. However the phone view will resize those to 100% of the screen. When set to 1, all columns of the grid except the inline elements will have a defined width percentage.

This option works with 2 mode. The first mode which is 100 for 100 % will redefine all the background images to fit in their appropriate boxes depending of their container proportion or parent container. The second option which is original will return the default CSS value for background without resizing anything. This can be useful when we are working with a site using many repeating patterns.