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不行. ...
随机推荐
- postgresql9.1数据库加解密
--如下为postgresql9.1数据库加解密模块配置 --设置schemapsql -U postgres -h localhostset schema 'sbdc';--生成日志\o E:/sh ...
- Restful风格
今天看到一个比较好的文章,记录一下: Restful风格API中用put还是post做新增操作有什么区别? 1 HTTP协议详解 HTTP协议通常承载于TCP协议之上,有时也承载于TLS或SSL协议层 ...
- Active information gathering-services enumeration
1.Summaize the book Practical Web Penetration Testing first nmap tools is important for gather in ...
- Intsall The Nessus in you kali linux
1.first you shold download the nessus on the web station the nessus download site url: https://www. ...
- php html生成页面二维码
这个方法主要是针对html页面生成二维码,因此需要一个配置文件phpqrcode.php(因内容太多所以请大家去百度网盘自己下载即可,链接: https://pan.baidu.com/s/1_2mA ...
- vscode断点调试工程化客户端文件
一.调试webpack配置文件 launch.json的配置如下,在webpack.dev.config.js文件中设置断点,开始调试. { "version": "0. ...
- C# - 什么是事件绑定?
今天在学习C#时碰到了一个新词:“绑定事件”,不知道是什么东西? 请各位C#前辈指点!!!
- 2017-2018 ACM-ICPC, NEERC, Moscow Subregional Contest
A. Advertising Strategy 最优策略一定是第一天用$y$元,最后一天再用$x-y$元补满. 枚举所有可能的$y$,然后模拟即可,天数为$O(\log n)$级别. 时间复杂度$O( ...
- idea 自定义注释模板
一.类注释模板 打开Preferences Editor -> File and Code Templates -> Files -> Class 效果图: 注释模板 /** * @ ...
- React(三)JSX内置表达式
(一)JSX是什么? React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 我们不需要一定使用 JSX,但它有以下优点 ...