移动端开发rem适配js代码
2018-01-17 16:27
746 查看
最近公司的移动端项目较多，就整理了一些移动端常用的一些东西，目前移动端开发大多使用rem方式，简单方便，只需一行js代码就能适配。
下面是适配代码：
//适配
(function() {
var newRem = function() {
var html = document.documentElement;
html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px';
};
window.addEventListener('resize', newRem, false);
newRem();
})();
除了需要js代码之外，还有需要设置一下body的字体大小，在<head>标签内加入一段<meta />,到此才算真正的完成的适配。
body{
font-size：16px；
}
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
非常的简单易懂，让我们在知识的路上，共同学习成长！
下面是适配代码：
//适配
(function() {
var newRem = function() {
var html = document.documentElement;
html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px';
};
window.addEventListener('resize', newRem, false);
newRem();
})();
除了需要js代码之外，还有需要设置一下body的字体大小，在<head>标签内加入一段<meta />,到此才算真正的完成的适配。
body{
font-size：16px；
}
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
非常的简单易懂，让我们在知识的路上，共同学习成长！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动端开发 rem js 代码 及 css 的@media 使用
- js动态计算移动端rem(移动端适配rem)
- 移动端页面开发适配 rem布局原理
- 移动端之js控制rem，适配字体
- 手机平板等移动端适配跳转URL的js代码
- js 移动端适配 （动态rem）
- 手机平板等移动端适配跳转URL的js代码
- Js动态设置rem来实现移动端字体的自适应代码
- 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码
- html移动端页面适配js（采用rem+百分比形式）
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
- 关于rem适配移动端
- 移动端适配rem
- JS-移动端适配字体
- 分针网—每日分享：移动端适配之rem详解
- rem自适应布局-移动端自适应必备:flexible.js
- js如何实现广告在pc端显示，移动端不显示.直让广告在点上是显示，手机上不显示代码
- js/jquery/html前端开发常用到代码片段
- js 图片区域可点击，适配移动端，图片大小随意改变
- js自适应rem -- 主要适用于移动端