插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下:
使用方法
body 的class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比(body除外)
缺点:
1.需要根据父类进行百分比 缩放
2.Chrome 字体缩放最小值为12px 就无法进行缩放
插件源码:
1 // JavaScript Document 2 //屏幕的宽度 3 //屏幕的宽度 4 ????var width_srceen = screen.width ; 5 ????var font_size = ?""; 6 ????//窗口缩放时执行 7 ????window.onresize=function(){ 8 ????????changbody_fontSize(".chang_fontSize"); 9 ????}10 ????//加载时执行11 ????window.onload = function(){12 ????????$("html").css("-webkit-text-size-adjust"13 ????????,"none");14 ????????font_size = $(".chang_fontSize").css("font-size").split("px")[0];15 ????????changbody_fontSize();16 ????}17 ????//根据屏幕的宽度与窗体的倍数进行字体的缩放18 ????function changbody_fontSize(obj){19 ????????var new_window_width = $(window).width();20 ????????var multiple =new_window_width/width_srceen;21 ????????var hi =font_size * multiple;22 ????????$(".chang_fontSize").css("font-size" ,hi+"px" );23 ????}24 ????
实例:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>字体缩放</title> 6 <script src="jquery-1.10.2.min.js"></script> 7 <script src="zoomFontSize.js"></script> 8 <style> 9 ????body{ ???10 ????????font-size:26px;11 ????}12 ????.size52px{13 ????????font-size:200%;14 ????}15 16 ????.size26px{17 ???????font-size:100%;18 ????}19 ????ul li{20 ???????padding-bottom:40px;21 ????}22 ????.Explain{23 ????????margin-top:100px;24 ????????font-size:80%;25 ????????margin-bottom:200px;26 ????}27 ????.Explain ul li{28 ???????padding-bottom:2px;29 ????}30 31 </style>32 </head>33 <body class="chang_fontSize">34 ????????<div class="Explain">35 ????????????使用方法:body 的 class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比(body除外) <br />36 ????????????缺点:<ul>37 ????????????????????<li>1.需要根据父类进行百分比 缩放</li>38 ????????????????????<li>2.Chrome 字体缩放最小值为12px 就无法进行缩放</li>39 ?????????????????</ul>40 ????????</div>41 ????????<div class="size52px">42 ????????????????全局缩放:<br />43 ????????????<ul>44 ????????????????????<li style="font-size:100%;color:#c0f">45 ????????????????????????当前类为是父类的百分之100%(52px)-(body:26px; 父类body的200%[52px])46 ????????????????????</li>47 ????????????????????<li style="font-size:50%;color:#f00">48 ????????????????????????当前类为是父类的百分之50%(26px)-(body:26px; 父类body的200%[52px])49 ????????????????????</li>50 ????????????????????<li style="font-size:40%;color:#000">51 ????????????????????????当前类为是父类的百分之20%(20.8px)-(body:26px; 父类body的200%[52px])52 ????????????????????</li>53 ????????????</ul>54 ????????</div>55 ????????<div style="font-size:26px;">56 ????????????????局部缩放:<br /> ???57 ????????????????<ul class="chang_fontSize">58 ????????????????????<li style="font-size:100%;color:#c0f">59 ????????????????????当前类为是父类的100%;(26px)-(父类为:26px)60 ????????????????????</li>61 ????????????????????<li style="font-size:80%;color:#f00">62 ????????????????????当前类为是父类的80%;(20.8px)-(父类为:26px)63 ????????????????????</li>64 ????????????????????<li style="font-size:50%;color:#000">65 ????????????????????当前类为是父类的50%;(20.8px)-(父类为:26px)66 67 ????????????????????</li>68 ????????????????</ul>69 ????????</div>70 </body>71 </html>
原文地址:http://www.jq22.com/jquery-info579
jQuery字体缩放缩放插件zoomFontSize.js
原文地址:https://www.cnblogs.com/joyco773/p/9126419.html