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计数器代码
Nov 04 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python3字符串学习教程
2015/08/20 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python缩进和冒号详解
2016/06/01 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
销售助理岗位职责
2014/02/21 职场文书
收银员岗位职责
2015/02/03 职场文书
放射科岗位职责
2015/02/14 职场文书
党校毕业个人总结
2015/02/28 职场文书
信仰观后感
2015/06/03 职场文书
python实现网络五子棋
2021/04/11 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
css样式important规则的正确使用方式
2022/06/10 HTML / CSS