插件描述：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. HardNet解读

    论文:Working hard to know your neighbor’s margins: Local descriptor learning loss  为什么介绍此文:这篇2018cvpr文 ...

  2. Faster_RCNN 3.模型准备(下)

    总结自论文:Faster_RCNN,与Pytorch代码: 本文主要介绍代码第二部分:model/ , 首先分析一些主要理论操作,然后在代码分析里详细介绍其具体实现. 首先在参考文章的基础上进一步详细 ...

  3. Scala 特质全面解析

    要点如下: Scala中类只能继承一个超类, 可以扩展任意数量的特质 特质可以要求实现它们的类具备特定的字段, 方法和超类 与Java接口不同, Scala特质可以提供方法和字段的实现 当将多个特质叠 ...

  4. ajax跨域请求 Uncaught SyntaxError: Unexpected token ：

    最近使用前后端分离开发项目比较多,经常碰到的一个问题就是,前端静态页面请求,后端api获取数据,很多时候,前端和后端都不是在同一个域下的(协议,域名,端口). 这里使用的是ajax请求,因为浏览器的同 ...

  5. ansible 常见指令表

    Play 指令 说明 accelerate 开启加速模式 accelerate_ipv6 是否开启ipv6 accelerate_port 加速模式的端口 always_run   any_error ...

  6. cocos开发学习记录

    场景的创建和切换 https://blog.csdn.net/lin453701006/article/details/56334578

  7. 前端----css 选择器

      css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...

  8. 【原创】大数据基础之Hive（3）最简绿色部署

    hadoop部署参考:https://www.cnblogs.com/barneywill/p/10428098.html 1 拷贝到所有服务器上并解压 # ansible all-servers - ...

  9. 借助dubbo-admin来管理你的服务

      1.  Github上下载最新的dubbo源码包并解压   2. 修改配置信息(打开 dubbo-admin/src/main/webapp/WEB-INF下的dubbo.properties,修 ...

  10. JS中的进制转换

    1 前言 js的进制转换, 分为2进制,8进制,10进制,16进制之间的相互转换, 我们直接利用 对象.toString()即可实现. 仅作为记录. 2 代码 //10进制转为16进制 (10).to ...