<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. C语言的多行宏定义

    一.多行宏定义的使用 最近在跟STM32L011K4T6低功耗的源代码,发现使用了多行的宏定义来封装函数,记得之前把\给删除掉,编译程序就一直报错. \是续行操作符,也就是宏定义一行写不完,需要多行写 ...

  2. 洛谷 P1480 A/B Problem

    P1480 A/B Problem 题目描述 输入两个整数a,b,输出它们的商(a<=10^5000,b<=10^9) 输入输出格式 输入格式: 两行,第一行是被除数,第二行是除数. 输出 ...

  3. 【SSH高速进阶】——struts2简单的实例

    近期刚刚入门struts2.这里做一个简单的struts2实例来跟大家一起学习一下. 本例实现最简单的登陆,仅包括两个页面:login.jsp 用来输入username与password:succes ...

  4. windows 批处理脚本(batch scripting)

    Guide to Windows Batch Scripting DOS 不需对变量事先声明.未声明或未初始化变量是一个空字符串("") 1. 变量赋值 set命令用于变量赋值.s ...

  5. 108.sqllite3(C语言数据库库)详解

    //创建数据库,插入表,生效 //创建数据库,插入表,生效 void create_database() { //数据库指针 sqlite3 *db=; //打开数据数据库,初始化指针 int res ...

  6. 洛谷 P2118 比例简化

    P2118 比例简化 题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为149 ...

  7. iOS开发之CocoaPods(objective-c第三方库管理工具)

    介绍: iOS开发中,大多数情况下,我们都须要集成一些第三方依赖库.对于一个稍大的项目,用到的第三方依赖库的数量也很可观.CocoaPods是objective-c第三方库管理工具,方便第三方库的管理 ...

  8. nyoj999 师傅又被妖怪抓走了 (预处理+bfs+状态压缩)

    题目999 题目信息 执行结果 本题排行 讨论区 师傅又被妖怪抓走了 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 话说唐僧复得了孙行者,师徒们一心同体,共诣西方.自宝 ...

  9. 【几何/数学】概念的理解 —— (非)刚体变换((non-)rigid transformation)

    1. 刚体变换与非刚体变换 What is a non-rigid transformation? 刚体变换(rigid transformation)一般分为如下几种: 平移对象,而不改变形状和大小 ...

  10. winform中comboBox控件加默认选项的问题

    winform程序设计中,label,TextBox,ComboBox等几个控件几乎是用得最多的,在设计中经常会遇到一些小问题,如:comboBox控件绑定了数据源之后,如何设置默认值? combob ...