$(window).resize(function ()// 绑定到窗口的这个事件中
{
 var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
 var wH = window.innerHeight;// 当前窗口的高度
 var wW = window.innerWidth;// 当前窗口的宽度
 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
 $('html').css('font-size', rem + "px");
});
 
$(function(){
 
 var whdef = 50/750;// 表示750的设计图,使用50PX的默认值
 var wH = window.innerHeight;// 手机窗口的高度
 var wW = window.innerWidth;// 手机窗口的宽度
 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
 $('html').css('font-size', rem + "px");
 
})
 
 //REM适配
      var _self =  this ;
        _self.width = 750;
        _self.fontSize = 100; 
        _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
        _self.changePage =  function (){
        document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
        }
        _self.changePage();
        window.addEventListener('resize', function (){_self.changePage();}, false ); 

pc端字体大小自适应几种方法的更多相关文章

  1. pc端字体大小计算以及echart中字体大小计算

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  3. 移动端页面以rem为单位设置字体大小不生效解决方法

    这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...

  4. 字体大小自适应纯css解决方案

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...

  5. 给tabBar设置图片和字体颜色的几种方法

    现在很多应用都使用到了tabBar,我们往往在给tabBar设置图片和字体的时候,当选中状态下,往往字体的颜色和图片的颜色不匹配,有时候就显得无从下手,我也常常忘了,所有写这个博客的目的,相当于给自己 ...

  6. Eclipse 在线汉化的和修改字体大小、颜色的方法

    一.在线汉化 先进入 http://www.eclipse.org/babel/downloads.php 找到自己对应版本的网址,然后复制下来. 然后,进入eclipse.点工具栏上的Help - ...

  7. 分析redis key大小的几种方法

    当redis被用作缓存时,有时我们希望了解key的大小分布,或者想知道哪些key占的空间比较大.本文提供了几种方法. 一. bigKeys 这是redis-cli自带的一个命令.对整个redis进行扫 ...

  8. Android 改变字体颜色的三种方法

    在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下     1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...

  9. Android中动态改变控件的大小的一种方法

    在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...

随机推荐

  1. numpy数据去重

    import numpy as npx = np.array([1,2,3,2,4,2,5,7,7])print(np.unique(x)) 简单散点图的绘制,没有显示出文字是因为需要下载个插件

  2. from表单校验插件 validate 实例

    $("#nextSubmit").click(function(){ $("#recovePasswordForm").submit(); }); $(&quo ...

  3. Number Sequence(周期是336!!不是48!!)

    1005 Number Sequence 时间限制: 1 Sec  内存限制: 60 MB 题目描述 A number sequence is defined as follows: f(1) = 1 ...

  4. C# 解压与压缩文件

    解压文件 ,引用 SharpZipLib.dll类库 方法一: public void UnGzipFile(string zipfilename) { //同压缩文件同级同名的非压缩文件路径 var ...

  5. docker /var/lib/docker/aufs/mnt 目录满了,全是垃圾数据

    #!/bin/sh echo "==================== start clean docker containers logs ======================= ...

  6. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  7. 期货大赛项目|五,表格插件datatatables在MVC中的应用

    系统中都需要表格,我见过最好的表格就是Datatables了,但中文文档有限,英文能力有限,就写一些简单用法 上图看效果先 要了分页和排序 基本用法 引入js和css bundles.Add(new ...

  8. servlet(一):Servlet的概念和运行流程

    概念: 狭义的 Servlet 是指 Java 语言实现的一个接口,广义的 Servlet 是指 任何实现了这个 Servlet 接口的类,一般情况下,人们将 Servlet 理解为后者. Servl ...

  9. 解读vscode断点调试配置文件【待续】

    一.参考链接 https://code.visualstudio.com/Docs/editor/debugging https://code.visualstudio.com/docs/nodejs ...

  10. 查看Linux系统软硬件信息

    查看Linux系统软硬件信息 查看计算机CPU信息 cat /proc/cpuinfo 查看文件系统信息 cat /proc/filesystems 查看主机中断信息 cat /proc/interr ...