pc端字体大小自适应几种方法
$(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");})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端字体大小自适应几种方法的更多相关文章
- pc端字体大小计算以及echart中字体大小计算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- LaTeX :font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- 移动端页面以rem为单位设置字体大小不生效解决方法
这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...
- 字体大小自适应纯css解决方案
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...
- 给tabBar设置图片和字体颜色的几种方法
现在很多应用都使用到了tabBar,我们往往在给tabBar设置图片和字体的时候,当选中状态下,往往字体的颜色和图片的颜色不匹配,有时候就显得无从下手,我也常常忘了,所有写这个博客的目的,相当于给自己 ...
- Eclipse 在线汉化的和修改字体大小、颜色的方法
一.在线汉化 先进入 http://www.eclipse.org/babel/downloads.php 找到自己对应版本的网址,然后复制下来. 然后,进入eclipse.点工具栏上的Help - ...
- 分析redis key大小的几种方法
当redis被用作缓存时,有时我们希望了解key的大小分布,或者想知道哪些key占的空间比较大.本文提供了几种方法. 一. bigKeys 这是redis-cli自带的一个命令.对整个redis进行扫 ...
- Android 改变字体颜色的三种方法
在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下 1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...
- Android中动态改变控件的大小的一种方法
在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现 一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...
随机推荐
- 编辑技巧分享如何给PDF添加注释
纸质的文件想要添加注释就直接拿笔在上面添加就好了,那么电子文件要怎么添加注释呢,今天小编就以我们现在经常使用到的PDF文档来为大家分享怎么添加注释. 1. 我们需要在百度中搜索并下载并安装一款PD ...
- java----dom4j 解析XML
dom4j: 由于内部采用迭代器,适合读取大文档: 数据块 1.下载 https://dom4j.github.io/ 2.添加包到工程目录下 使用 import org.dom4j.Document ...
- python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过autopy实现右键菜单和另存为操作
1.参考 利用 Python + Selenium 自动化快速截图 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素) 使用python获取系统所有进程PID以及进程名 ...
- mongo2csv
#!/usr/bin/env python3 import pymongo import datetime import os yesterday = str(datetime.date.today( ...
- Mysql数据实时同步
企业运维的数据库最常见的是 mysql;但是 mysql 有个缺陷:当数据量达到千万条的时候,mysql 的相关操作会变的非常迟缓; 如果这个时候有需求需要实时展示数据;对于 mysql 来说是一种灾 ...
- 【国庆】记一次mysqld_safe引发mysql进程故障
今天是举国欢庆的日子,但是Mariadb密码忘记了,于是巴拉巴拉的执行"mysqld_safe --skip-grant-tables &"这个神技能,打算跳过密码验证,直 ...
- python运算符——比较运算符
比较运算符的运算结果会得到一个bool类型,也就是逻辑判定,要么是真True,要不就是False 大于“>” 小于“<” 不说了,看看不等于,用“!=”表示.大于等于“>=”和小 ...
- HDU 5984.Pocky(2016 CCPC 青岛 C)
Pocky Let’s talking about something of eating a pocky. Here is a Decorer Pocky, with colorful decora ...
- 作业二 | Git的安装与使用
作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址https://github.com/k ...
- PostgreSQL自学笔记:3 数据库的基本操作
3 数据库的基本操作 3.1 创建数据库 3.1.1 使用对象浏览器创建数据库 [Server] -> PostgreSQL 9.6 -> 数据库,右击 -> 创建 通常: 数据库: ...