$(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. nginx优化之keepalive

    一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...

  2. docker - 容器lxc

    容器:是在用户空间进行隔离的组件叫做容器 常用的容器有lxc ----libcontainer---runc 需要隔离的资源有: Rootfs:每个容器对应的一个目录做为根目录 User: Hostn ...

  3. 删除jar包

    public class TestDelete { private static List<File> files = new ArrayList(); public static voi ...

  4. jvm领域优秀博主

    dh5724 不过csdn iteye 博客园信息均被自己删除,只在一些问答中和引用中有部分信息. redcreen 对jvm有深入认知. RednaxelaFX oracle java 编译器开发者 ...

  5. DWM1000 测距原理简单分析 之 SS-TWR代码分析2 -- [蓝点无限]

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: 首先将SS 原理介绍中的图片拿过来,将图片印在脑海里. 对于DeviceA 和 DeviceB来说,初 ...

  6. 探索JavaScript中Null和Undefined的深渊

    当讨论JavaScript中的原始数据类型时,大多数人都知道的基本知识,从String,Number到Boolean.这些原始类型相当简单,行为符合常识.但是,本文将更多聚焦独特的原始数据类型Null ...

  7. 2017-2018 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2017)

    A. Airport Coffee 设$f_i$表示考虑前$i$个咖啡厅,且在$i$处买咖啡的最小时间,通过单调队列优化转移. 时间复杂度$O(n)$. #include<cstdio> ...

  8. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Khamovniki

    A. Ability Draft 记忆化搜索. #include<stdio.h> #include<iostream> #include<string.h> #i ...

  9. 20181115 python-第一章学习小结part1

    知识点回顾: 什么是编程: 写代码,让计算机执行任务 编程语言的分类与特性: 1.机器语言,即二进制语言,最帖近于机器底层,可以由计算机直接执行,故速度最快,但不适合开发. 2.汇编语言,直接将二进制 ...

  10. 20189210牟健 《Linux内核原理与分析》第二周作业

    本周学习了汇编指令以及通过反汇编一个小程序来了解栈的变化 写了一个简单的C程序,如图所示: 通过gcc -s -o main.s main.c -m32指令将其编译成汇编程序 打开该汇编文件并删除不重 ...