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浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 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中使用Oracle数据库(2)
2006/10/09 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
详解webpack 如何集成第三方js库
2017/06/29 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python读取图片为16进制表示简单代码
2018/01/19 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
土木工程专业个人求职信
2013/12/05 职场文书
党员培训思想汇报
2014/01/07 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
党员承诺书范文2015
2015/04/27 职场文书
团结主题班会
2015/08/13 职场文书