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 25 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
JavaScript用select实现日期控件
2015/07/17 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
微信公众号支付H5调用支付解析
2016/11/04 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
python如何统计序列中元素
2020/07/31 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
浅析python标准库中的glob
2020/03/13 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
搞笑的获奖感言
2014/08/16 职场文书
单位婚育证明范本
2014/11/21 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
党小组鉴定意见
2015/06/02 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle