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 检测浏览器类型和版本的代码
Sep 15 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
javascrpt密码强度校验函数详解
Mar 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
第八节 访问方式 [8]
2006/10/09 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
深入理解Webpack 中路径的配置
2017/06/17 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
基于python实现聊天室程序
2018/07/27 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Golang 遍历二叉树
2022/04/19 Golang