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 插件实现图片延迟加载效果代码
Feb 06 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 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
MyEclipse常用配置图文教程
2014/09/11 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
JS实现动态无缝轮播
2020/01/11 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python列表计数及插入实例
2014/12/17 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python画图学习入门教程
2016/07/01 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
2014年学生会生活部工作总结
2014/11/07 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP