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实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
layui选项卡效果实现代码
May 19 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JS前端广告拦截实现原理解析
Feb 17 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保存带BOM文件的方法
2015/02/12 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
js实现常用排序算法
2016/08/09 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
微信小程序实现消息框弹出动画
2020/04/18 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Django视图类型总结
2021/02/17 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
金融与证券专业求职信
2014/06/22 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android