Js动态设置rem来实现移动端字体的自适应代码


Posted in Javascript onOctober 14, 2016

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧。

具体代码如下所示:

//设置根元素字体
var win = window,
doc = document;
function setFontSize() {
var winWidth = $(window).width();


//750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小

var size = (winWidth / 750) * 100;

doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px';
};
//这里我们给个定时器来实现页面加载完毕再进行字体设置
setTimeout(function() {

//初始化

setFontSize();
}, 100);

以上所述是小编给大家介绍的Js动态设置rem来实现移动端字体的自适应代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
JS动态计算移动端rem的解决方案
Oct 14 #Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 #Javascript
第一次接触神奇的Bootstrap
Oct 14 #Javascript
js仿手机页面文件下拉刷新效果
Oct 14 #Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 #Javascript
js关于getImageData跨域问题的解决方法
Oct 14 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP如何使用Memcached
2016/04/05 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python request操作步骤及代码实例
2020/04/13 Python
详解python metaclass(元类)
2020/08/13 Python
华为C++笔试题
2014/08/05 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
党员违纪检讨书
2014/02/18 职场文书
大一新生学期自我评价
2014/04/09 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
银行业务授权委托书
2014/10/10 职场文书
店铺转让协议书
2014/12/02 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
分析并发编程之LongAdder原理
2021/06/29 Java/Android