<script>
/*
# 按照宽高比例设定html字体, width=device-width initial-scale=1版
# @pargam win 窗口window对象
# @pargam option{
designWidth: 设计稿宽度,必须
designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选
注意点: 安卓下 html的font-size设置小于12px的值不起作用
注意点: 安卓下 html的font-size设置小于12px的值不起作用
注意点: 安卓下 html的font-size设置小于12px的值不起作用
designFontSize: 设计稿宽高下用于计算的字体大小,默认100,可选
callback: 字体计算之后的回调函数,可选
}
# return Boolean;
# ps:请尽量第一时间运行此js计算字体
*/
!function (win, option) {
var count = 0,
designWidth = option.designWidth,
designHeight = option.designHeight || 0,
designFontSize = option.designFontSize || 20,
callback = option.callback || null,
root = document.documentElement,
body = document.body,
rootWidth, newSize, t, self;

root.style.width = '100%';
//返回root元素字体计算结果
function _getNewFontSize() {
//var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
var scale = (window.innerWidth) / designWidth;
return parseInt(scale * 10000 * designFontSize) / 10000;
}

!function () {
rootWidth = root.getBoundingClientRect().width;
self = self ? self : arguments.callee;
//如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
if (rootWidth !== win.innerWidth && count < 20) {
win.setTimeout(function () {
count++;
self();
}, 0);
} else {
newSize = _getNewFontSize();
//如果css已经兼容当前分辨率就不管了
if (newSize + 'px' !== getComputedStyle(root)['font-size']) {
root.style.fontSize = newSize + "px";
return callback && callback(newSize);
}
}
}();
//横竖屏切换的时候改变fontSize,根据需要选择使用
win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
clearTimeout(t);
t = setTimeout(function () {
self();
}, 300);
}, false);
}(window, {
designWidth: 750,
// designHeight: 1136,
designFontSize: 100, //安卓下不能设置小于12px的字体 所以这个值要尽量大些
callback: function (argument) {
//console.log("test")
}
});
</script>

30行js rem弹性布局适配所有分辨率的更多相关文章

  1. 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)

    用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...

  2. 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)

    用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...

  3. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  4. pc端的弹性布局适配方案

    方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以19 ...

  5. 适用于移动设备弹性布局的js脚本(rem单位)

    背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用 ...

  6. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  7. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  8. web app 自适应 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  9. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

随机推荐

  1. django 简单会议室预约(6)

    后台完了现在来看前端,前端用了一个bootstrap框架,看起来能好看点 先看一下文件结构:在djapp里创建了两个文件夹templates和static templates里面是要显示的页面,sta ...

  2. ListCtrl添加右键菜单(ListCtrl类里编辑,给ListCtrl 发送NM_RCLICK消息)

    在开发中会用到右键菜单,我们来一起学习一下. 假如,我们现在已经准备好了列表,就差右键处理了. 1.在资源视图中的添加一个MENU,如图 2.给要添加右键菜单的ListCtrl子类,添加消息 按 ct ...

  3. 洛谷 P3817 小A的糖果

    P3817 小A的糖果 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖 ...

  4. pycharm快捷键、经常使用设置、配置管理

    http://blog.csdn.net/pipisorry/article/details/39909057 本博客一直在同步更新中! 内容包括:pycharm学习技巧 Learning tips. ...

  5. Relaxation step(Dijkstra's 最短路径算法)

    翻译成中文就是"松弛",属于工程优化的范畴: Dijkstra 的单源最短路径算法,有一个重要的步奏,当访问到新的结点 u (加入到集合 S),然后遍历 u 的邻接顶点(Adj), ...

  6. html5 audio标签相关知识点总结

    1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...

  7. 12、python单步调试工具pdb

    pdb 第4种方式是启动Python的调试器pdb,让程序以单步方式运行,可以随时查看运行状态.我们先准备好程序: # err.py s = '0' n = int(s) print(10 / n) ...

  8. [Angular] Update FormArray with patchValue

    Currently, patchValue doesn't support update FormArray. The workarround is you need to empty the for ...

  9. winedt (latex 编译器)解决中文的问题(CJK & CTEX)

    主要是导入相关的库支持: 1. CJK \usepackage{CJK}:CJK,是中日韩的英文首字母的组合,处理中文需要先导入这个包: \begin{CJK*}{GBK}{song}:默认句式,表示 ...

  10. Python中的Sets数据结构

    Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...