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 相关文章推荐
js强制把网址设为默认首页
Sep 29 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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编写大型网站问题集
2007/03/06 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php常用hash加密函数
2014/11/22 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
实习生的自我评价
2014/01/08 职场文书
学校志愿者活动总结
2014/06/27 职场文书
学习张林森心得体会
2014/09/10 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
大学新生入学感想
2015/08/07 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python