home page Site building tutorial web front end text

Automatically scale text size according to window size

Reference jquery.min.js and the following JS code to save the following code as fontFlex. js (function ($) {$. fn. fontFlex=function (min, max, mid) {var $this=this& n...

quote Jquery . min.js and the following JS codes

Save the following code as fontFlex. js

 (function($) {     $.fn.fontFlex = function(min, max, mid) {         var $this = this;         $(window).resize(function() {             var size = window.innerWidth / mid;             if (size < min) size = min;             if (size > max) size = max;             $this. css ('font-size', size + 'px');         }).trigger('resize');     }; })( jQuery );



html Application:

 <! DOCTYPE html> <html> <head> <script src="js/j query .min.js"></script> <script src="js/fontFlex.js"></script> <script type="text/javascript">     $(function() {$('.text').fontFlex(20, 60, 40);}); 	 </script> </head> <body>  <dvi class="text"> <p>Lotus is one of the ten famous flowers in China. It is an aquatic plant for many years. It can be divided into three systems: lotus root, lotus seed and lotus flower. It "emerges from the mud without stain, and washes clean ripples without demon"</ P> <p>In people's minds, lotus is a symbol of nobility and purity. Then why can lotus flowers and leaves "come out of the mud without staining"? It turns out that their outer layers are covered with wax, and there are many papillary projections There is air between the protrusions, blocking the infiltration of muddy water</ p>  </div> </body> </html>


Reward
poster

This article is written by Beautiful theme Original or collected and released

Please indicate the address of this article for reprinting: https://www.umtheme.com/web/45.html

Related recommendations

 CSS cardioid winding rotation effect

CSS cardioid winding rotation effect

CSS heart-shaped winding and rotating effect is an interesting animation effect, which can bring romantic and dynamic atmosphere to web pages. This effect will rotate a heart-shaped pattern infinitely, and twist around a central point at the same time
web front end 2023.09.13 zero two thousand seven hundred and twenty-two
 Create css3 animation effects commonly used in h5

Create css3 animation effects commonly used in h5

Css3 provides many powerful special effects that can be used to achieve a variety of effects. Here are some common css3 effects that I summarize, which can be directly referenced if necessary: 1. Zoom in when levitating:. one {transition: All 0.4s&nb
web front end 2023.09.13 one two thousand six hundred and sixty-nine
Post comments

Thank you for your support