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不行. ...
随机推荐
- win10 激活工具 Re-LoaderByR@1n.exe
名字叫 Re-LoaderByR@1n.exe 无广告, https://pan.baidu.com/s/1MBix1cZxKpUTA6MUgL7uLQ 如果变成教育版,可以用以下激活码变成专业版:W ...
- sass创建web项目环境步骤
1)npm创建web前端项目环境步骤 1.新建文件夹,在该文件下进入cmd控制台2.输入命令 npm init 回车3.name:名字只支持小写,不支持大写,将大写的名字改为小写即可4.version ...
- 使用CompletionService结合ExecutorService批处理调用存储过程任务实例
此实例为java多线程并发调用存储过程实例,只做代码记载,不做详细描述 1.线程池构造初始化类CommonExecutorService.java package com.pupeiyuan.go; ...
- 解码escape类型的unicode
content = Regex.Unescape(content);
- C#学习-子类的初始化顺序
使用了继承之后,当我们初始化一个子类时,除了会调用子类的构造函数外,同时也会调用基类的构造函数. 子类的初始化顺序如下: (1)初始化类的实例字段: (2)调用基类的构造函数: (3)调用子类的构造函 ...
- oracle下查询的sql已经超出IIS响应时间
场景: 最近一直发生oracle下查询的sql已经超出IIS响应时间,但是后台DB的SQL查询还未终止,一直在查询.这对DB是造成很大的压力. 解决办法 增加OracleCommand 中的Comma ...
- Python-uiautomator使用说明文档
https://github.com/xiaocong/uiautomator 这个Python库是基于Android自带的uiautomator测试框架的一个python封包.适用于Android ...
- 关于input的检验问题
写了很多小应用 但是 对于input有很多 相同的需求 在这里做一个总结 将用的多的校验方法 封装为方法 使用 1.只能输入正整数的校验 输入的时候同时校验 将字符类型的全部替换为空 <inpu ...
- eclipse向tomcat部署站点发现没有class文件。
其实大部分解决办法在网上都有的,例如这里: https://blog.csdn.net/shiyuehit/article/details/53262807 eclipse下无法自动编译或编译失败等问 ...
- Servlet(三):生命周期、常用方法、常见错误
Servlet的生命周期:从第一次调用,到服务器关闭.如果在web.xml 中配置了load-on-startup则是从服务器开启到服务器关闭. 注意: * init方法是对Servlet进行初始化的 ...