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判断图片尺寸大小实例分析
Jun 16 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
AngularJS中的promise用法分析
May 19 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
JavaScript实现更换背景图片
Oct 18 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python实现聊天机器人的示例代码
2018/07/09 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python多线程下信号处理程序示例
2019/05/31 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Python pandas如何向excel添加数据
2020/05/22 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
金讯Java笔试题目
2013/06/18 面试题
先进班级集体事迹材料
2014/01/30 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
城管个人总结
2015/02/28 职场文书
在职证明格式样本
2015/06/15 职场文书
舞出我人生观后感
2015/06/16 职场文书
教师节晚会主持词
2015/06/30 职场文书