<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. leaf cell

    leaf cell是否可以理解为设计中与或非门等这些基本的单元?

  2. TypeScript深入学习

    基础类型booleannumberstringstring[]//Array<string> 数组类型(ReadonlyArray<string>数组不能修改,也不允许被赋值给 ...

  3. 【Spring】Service 注入失败,空指针

    service层的类都有用@Service标识,但报空指针,注入失败,很可能是因为spring的application配置和springmvc的配置文件配置错误,导致容器冲突了. spring和spr ...

  4. 洛谷——P1073 最优贸易 ([NOIP2009] )

    https://www.luogu.org/problem/show?pid=1073 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多 ...

  5. wap.css

    wap.css 一.总结 1.官方有教程:英语的 http://www.developershome.com/wap/wcss/ 2.wap.css :就是控制页面在手机端样式的 3.DOCTYPE ...

  6. VUE笔记 - 品牌后台 - v-for Splice Some Filter findIndex indexOf 直接return函数结果

    <body> <div id="app"> <div class="panel panel-primary"> <di ...

  7. Ubuntu14.04中踩过的坑

    今天安装Ubuntu 14.0.4,因为需要使用python3,所以就直接配置如下:sudo rm /usr/bin/pythonsudo ln -s /usr/bin/python3.5  /usr ...

  8. .net core 修改网站启动端口

    原文:.net core 修改网站启动端口 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yenange/article/details/81675 ...

  9. 洛谷 P2790 ccj与zrz之积木问题

    P2790 ccj与zrz之积木问题 题目背景 ccj和zrz无聊到了玩起了搭积木...(本题选自uva101,翻译来自<算法竞赛入门经典2>) 题目描述 从左到右有n个木块,编号从0到n ...

  10. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...