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不行. ...
随机推荐
- 轮播swiper配置选项
本文主要介绍了swiper配置选项,包含了轮播的无限滚动.懒加载.监听当前位置.上下翻页.过渡动画渐变.延时加载图片.自动轮播等: swiper官方链接DEMO <!DOCTYPE html&g ...
- Vertx.vertx()初始框图和模块
Vertx.vertx()实例 一.构造方法 1. VertxImpl构造方法 选择 transports protocol , default select 模型 if (options.getPr ...
- 微信H5支付证书过滤
在对接微信支付,退款的时候,遇到 Caused by: java.lang.RuntimeException: java.io.IOException: DerInputStream.getLengt ...
- spring boot slf4j日记记录配置详解
https://blog.csdn.net/liuweixiao520/article/details/78900779
- 前端技术之--CSS
在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style ...
- 利用反射获取数据列+emit生成属性+单例模式
1:IDictionary<string,string > 可以存储数据,将拼接的sql可以存储到这里下次可以使用 定义自定义属性表和列 typeof(T).GetCustomAttrib ...
- HDU 1880 魔咒词典 (字符串hash)
<题目链接> 题目大意: 就是每个字符串有一个配套的对应字符串,询问的时候,无论输出其中的哪一个字符串,输出另一个,如果不存在这个字符串,直接输出"what?". 解题 ...
- Android数据存储引擎---SQLite数据库
目标:是否可以在PC端桌面上使用SQLite数据库制作一个财务文件? 目录: 来源: 实践: 总结和比较: SQLite数据简介 是什么,内部结构是怎样的,数据库和表的关系是什么 有什么用 常用的操作 ...
- XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix
A. Accommodation Plan 对于已知的$K$个点,离它们距离都不超过$L$的点在树上是一个连通块,考虑在每种方案对应的离$1$最近的点统计. 即对于每个点$x$,统计离它距离不超过$L ...
- centos中安装配置nginx完成之后主机无法访问
原因 VMware中安装centos7,安装配置完成nginx后,主机无法访问.虚拟机没有放行Nginx默认端口80. 解决办法 首先:开启 web 端口 firewall-cmd --permane ...