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不行. ...
随机推荐
- AD证书导入文档(单向认证)
AD证书或者SSL证书导入的方法步骤(在root用户下操作) 1. 将证书命名为AD-PRO.cer,并确定证书的颁发. 2. 将/app/ad_cert/keystore下的原有证书删除掉和文件 ...
- python 代理
1.参考 http://docs.python-requests.org/en/master/user/advanced/ Using Python’s urllib2 or Requests wit ...
- mybaits返回自增主键ID
mybaits两种获取自增主键ID的方法:一种是使用useGeneratedKeys,第二种是selectKey方法获取. useGeneratedKeys <insert id="i ...
- ECMAScript 6 变量的解构赋值
1.数组的结构赋值 1.1 基本用法 可以用“模式匹配”的写法给数组的元素赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值.注意:元素的值和位置是一一对应关系,如果对应的位置没有值,就会解构 ...
- C. Queen Codeforces Round #549 (Div. 2) (搜索)
---恢复内容开始--- You are given a rooted tree with vertices numerated from 11 to nn . A tree is a connect ...
- Linux 上使用LVM 扩展磁盘Size
第一步:使用 fdisk -l 查看当前磁盘容量 fdisk -l 第二步: 使用 fdisk /dev/sda/ 为free space 添加新的分区 fdisk /dev/sda m :列出所有命 ...
- Android-SD卡相关操作
SD卡相关操作 1.获取 App 文件目录 //获取 当前APP 文件路径 String path1 = this.getFilesDir().getPath(); 当前APP目录也就是应用的这个目录 ...
- Java-正则使用
Java-正则使用 注意 在Java中由于string的设计,导致斜杠是特殊的字符,所以如若想要在正则中使用斜杠,则需要两个斜杠来表示 eg: \d 需要写成: \\d ,两外 \\\\ 表示匹配单个 ...
- Selenium 2自动化测试实战
Selenium 2自动化测试实战 百度网盘 链接:https://pan.baidu.com/s/1aiP3d8Y1QlcHD3fAlEj4sg 提取码:jp8e 复制这段内容后打开百度网盘手机Ap ...
- Petrozavodsk Summer-2016. Ural FU Dandelion Contest
A. Square Function 留坑. B. Guess by Remainder 询问$lcm(1,2,3,...,n)-1$即可一步猜出数. 计算$lcm$采用分治FFT即可,时间复杂度$O ...