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 相关文章推荐
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jquery实现网页定位导航
Aug 23 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
Ext 今日学习总结
2010/09/19 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python如何实现int函数的方法示例
2018/02/19 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
大学生工作自荐书
2014/06/16 职场文书
个人简历自荐信
2014/06/26 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书