It is an implementation that detects a change in window size and changes the percentage of text size and image size.
I explain it using jQuery in the mood somehow.I think that it can be applied to other frameworks such as Vue.js.
var w = window.innerWidth; // detect window width resize jQuery(window).resize(function() { baseFontDeside(); }); // deside window size function baseFontDeside () { if (w >= 768) { var baseFontSize = w/73; jQuery('html').css('font-size',baseFontSize + 'px'); } else if (w >= 576) { var baseFontSize = w/46; jQuery('html').css('font-size',baseFontSize + 'px'); } else { jQuery('html').css('font-size','medium'); } }
A reference article when getting window width and detecting changes in Vue.js.
See the supplementary part of the link below
→Note:Detect and change screen resizing
BaseFontDeside()
sets the font size as a percentage depending on the screen width.