jQuery字体缩放缩放插件zoomFontSize.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery字体缩放缩放插件zoomFontSize.js相关的知识，希望对你有一定的参考价值。
插件描述：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的主要内容，如果未能解决你的问题，请参考以下文章