插件描述：jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放，兼容性如下：

使用方法

body 的class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比（body除外）

缺点：

1.需要根据父类进行百分比 缩放

2.Chrome 字体缩放最小值为12px 就无法进行缩放

插件源码：

 // JavaScript Document

 //屏幕的宽度

 //屏幕的宽度

     var width_srceen = screen.width ;

     var font_size =  "";

     //窗口缩放时执行

     window.onresize=function(){

         changbody_fontSize(".chang_fontSize");

     }

     //加载时执行

     window.onload = function(){

         $("html").css("-webkit-text-size-adjust"

         ,"none");

         font_size = $(".chang_fontSize").css("font-size").split("px")[0];

         changbody_fontSize();

     }

     //根据屏幕的宽度与窗体的倍数进行字体的缩放

     function changbody_fontSize(obj){

         var new_window_width = $(window).width();

         var multiple =new_window_width/width_srceen;

         var hi =font_size * multiple;

         $(".chang_fontSize").css("font-size" ,hi+"px" );

     }

实例：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>字体缩放</title>

 <script src="jquery-1.10.2.min.js"></script>

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

 <style>

     body{

         font-size:26px;

     }

     .size52px{

         font-size:200%;

     }

     .size26px{

        font-size:100%;

     }

     ul li{

        padding-bottom:40px;

     }

     .Explain{

         margin-top:100px;

         font-size:80%;

         margin-bottom:200px;

     }

     .Explain ul li{

        padding-bottom:2px;

     }

 </style>

 </head>

 <body class="chang_fontSize">

         <div class="Explain">

             使用方法：body 的 class属性 添加 changbody_fontSize 而且整个页面的字体属性设为百分比（body除外） <br />

             缺点：<ul>

                     <li>1.需要根据父类进行百分比 缩放</li>

                     <li>2.Chrome 字体缩放最小值为12px 就无法进行缩放</li>

                  </ul>

         </div>

         <div class="size52px">

                 全局缩放：<br />

             <ul>

                     <li style="font-size:100%;color:#c0f">

                         当前类为是父类的百分之100%（52px)-(body:26px; 父类body的200%[52px])

                     </li>

                     <li style="font-size:50%;color:#f00">

                         当前类为是父类的百分之50%（26px）-(body:26px; 父类body的200%[52px])

                     </li>

                     <li style="font-size:40%;color:#000">

                         当前类为是父类的百分之20%（20.8px）-(body:26px; 父类body的200%[52px])

                     </li>

             </ul>

         </div>

         <div style="font-size:26px;">

                 局部缩放：<br />

                 <ul class="chang_fontSize">

                     <li style="font-size:100%;color:#c0f">

                     当前类为是父类的100%;(26px)-(父类为：26px)

                     </li>

                     <li style="font-size:80%;color:#f00">

                     当前类为是父类的80%;(20.8px)-(父类为：26px)

                     </li>

                     <li style="font-size:50%;color:#000">

                     当前类为是父类的50%;(20.8px)-(父类为：26px)

                     </li>

                 </ul>

         </div>

 </body>

 </html>

原文地址：http://www.jq22.com/jquery-info579

jQuery字体缩放缩放插件zoomFontSize.js的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  3. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  6. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  7. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  8. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  9. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

随机推荐

  1. python下载mp4 同步和异步下载支持断点续下

    Range 用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式: Range:(unit=first byte pos)-[last byte pos] Range 头部的格式有以下几种 ...

  2. redis启动异常

    在官网上下载redis包,解压后启动. 启动redis报下面的错误! *** FATAL CONFIG FILE ERROR *** Reading the configuration file, a ...

  3. 查看局域网中连接的主机名和对应的IP地址

    1.查看局域网中的所有主机名 2.通过主机名解析IP地址:-4选项 3.通过IP地址解析主机名:-a选项

  4. VS2013 VS2015 VS2017调试出现无法启动iis express web服务器

    最近老是遇到这个问题,天天如此,烦死人,网上答案繁多,但是都解决不了,也是由于各种环境不同导致的,这里把几种解决方法都记录下 一.其他项目都可以,就这么一个不行 因为其他项目都可以,就这么一个不行,所 ...

  5. 011_docker内部各系统基本工具安装

    root@nginx-56b8c64cb4-t97vb:/# cat /etc/os-release #查看linux发行版本 PRETTY_NAME="Debian GNU/Linux 8 ...

  6. jqueryui插件slider的简单使用

    <!DOCTYPE html> <html> <head> <title>slider</title> <meta charset=& ...

  7. python初始化环境记录

    初始化python环境:yum install -y gcc libffi-devel python-devel openssl-devel gcc-c++yum install -y python- ...

  8. JS,Jquery获取各种屏幕的宽度和高度（转载）

    原文:https://www.cnblogs.com/fuyuanming/articles/5453756.html 1.JS 网页可见区域宽: document.body.clientWidth ...

  9. WebService生成XML文档时出错。不应是类型XXXX。使用XmlInclude或SoapInclude属性静态指定非已知的类型。

    情况是SingleRoom和DoubleRoom是Room类的子类.在WebService中有一个方法是返回Room类. public Room Get(int roomId) { return Ro ...

  10. git的简单使用（windows）

    使用参考文档 git简易指南:http://www.bootcss.com/p/git-guide/ git官方文档:https://git-scm.com/book/zh/v1/%E8%B5%B7% ...