<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. Solr 写数据流程

    Solr 写数据流程: 1.源字符串首先经过分词器处理,包括:拆分词以及去除stopword. 2.然后经过语言处理,包括大小写转换以及单词转换. 3.将源数据中需要的信息加入到Document中的各 ...

  2. ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第二篇:第一个页面

    摘要      本文首先一步一步完成Demo的第一个页面——首页.然后根据实现过程,说明一下其中用到的与ASP.NET MVC相关的概念与原理. 让第一个页面跑起来      现在,我们来实现公告系统 ...

  3. PatentTips - Method and Apparatus to Support Virtualization with Code Patches

    BACKGROUND As recognized in Revision 2.0 of the Intel® Virtualization Technology Specification for t ...

  4. 解决Keystore was tampered with, or password was incorrect

    使用签名文件keystore查看生成的数字签名中报错解决 Keystore was tampered with, or password was incorrect 这是由于android规定自己定义 ...

  5. QQ在线交谈代码

    非常多商业站点的右边都会有一个固定或者浮动的层显示QQ在线在线交谈或者咨询的button.当浏览者点击了就会弹出相应的对话框. 这里的QQ交谈有两种: 一种是企业QQ,那要生成以上的功能就非常easy ...

  6. amazeui学习笔记--css(HTML元素2)--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  7. Rick's RoTs -- Rules of Thumb for MySQL--转载

    原文地址:http://mysql.rjweb.org/doc.php/ricksrots Brought to you by Rick James Here are 160+ tips, trick ...

  8. python3怎样画二维点图

    引用自:http://www.cnblogs.com/super-zhang-828/p/4792206.html import matplotlib.pyplot as pltplt.plot([1 ...

  9. JS实现动画方向切换效果(包括:撞墙反弹,暂停继续左右运动等)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. Flask项目之手机端租房网站的实战开发(二)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...