rem.js的用法及在浏览器端的适配
首先介绍下自己，我是从后端转前端，对于前端的见识还不深望各位全当一个新手自述.......
随着移动设配的更新换代，市场上涌现了大量的非主流设备分辨率，比如华为手机......
更新换代快的大前提下自然又涌现出了适配问题，主流解决方案有很多，如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的，但如果被元素塞满的设计稿并且客户要求设计稿的每一个元素都能动起来，每1p只能占据一屏的情况下，用上述方法就会有一些问题，例如错位，例如变形......
大背景介绍完上正题，在一系列的尝试下我选择了rem.js
1）rem.js的用法
用法很简单只需要像其他js一样引用就好了
rem.js下载地址https://github.com/amfe/lib-flexible/blob/master/src/flexible.js
或者直接在网页中插入
<script type="text/javascript">
!function(e,t){function n(){var n=l.getBoundingClientRect().width; t=t||540,n>t&&(n=t);var i=100*n/e*nm;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
2）rem.js出现的问题或者说浏览器出现的一些问题
在app项目中，rem表现非常出色可以说几乎做到了全设备兼容的一个状态，但是网页需求除了在app中应用同样也有活动H5单页面的运用，同样在各大全面屏手机当中rem依然表现出色，而部分非全面屏如果在浏览器打开，如微信浏览器打开上面一大行将会显示标题，在安卓手机用默认浏览器打开有些还会出现上下都有空白，可见区域高度远远小于实际设备高度，此时我们就会发现如果内容很满的话，元素会发生重叠等现象
3）解决办法
出现这种问题很明显是可见高度小于期望高度，此时只需要添加一个系数就好了,下面以苹果5s，苹果6，7，8做个例子讲解下
<script>
var clienH=parseInt(document.documentElement.clientHeight);
var num;
var nm;
if(clienH<568){
// 苹果5s/se高度为568目前应该是用户群用的最小的屏,如果4s还是存在用户的话或者有更小的屏还在用的话根据实际情况做考虑.
num=parseInt(document.documentElement.clientHeight)/568;
nm= num>1 ? 1 : num;
console.log("5s");
}else if(568<=clienH<667){
// 苹果6,7,8设备高度667
num=parseInt(document.documentElement.clientHeight)/667;
nm= num>1 ? 1 : num;
console.log("6 7 8");
}else if(667<=clienH<736){
// 苹果6p,7p,8p设备高度736
num=parseInt(document.documentElement.clientHeight)/736;
nm= num>1 ? 1 : num;
console.log("6p 7p 8p");
}else{
nm=1
};
//再往上就是全面屏设配了rem对全面屏支持非常优秀不需要多余的操作
</script>
系数最大不能超过1超过1将会影响页面布局，所以上面做了个判断优化rem.js代码如下
<script type="text/javascript">
!function(e,t){function n(){var n=l.getBoundingClientRect().width; var clienH=parseInt(document.documentElement.clientHeight);var num;var nm;if(clienH<568){num=parseInt(document.documentElement.clientHeight)/568;nm= num>1 ? 1 : num;console.log("5s");}else if(568<=clienH<667){num=parseInt(document.documentElement.clientHeight)/667;nm= num>1 ? 1 : num;console.log("6 7 8");}else if(667<=clienH<736){num=parseInt(document.documentElement.clientHeight)/736;nm= num>1 ? 1 : num;console.log("6p 7p 8p");}else{nm=1}; t=t||540,n>t&&(n=t);var i=100*n/e*nm;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
4）此处设定1rem=100px
如一个div {width:200px; height:300px;}样式写成div{width:2rem;height:3rem;}即可。。。。
-----------------------------------------------------------------------------------------------------------------------------------------------
祝各位同学前程似锦！
最新文章
- Entity Framework的启动速度优化
- 错误：当你使用id作为sharepoint的自定义页面的查询参数时，总会提示项目不存在！
- SQL优化技巧
- vijos P1009清帝之惑之康熙
- 在iOS中实现类似安卓自动消失提示框
- 炜煌T3POS58微打参数设置方法
- Android底部TabHost API
- wooyun本地数据抓取
- 变形--位移 translate()
- hdu_3555 bomb
- android学习笔记20——ProgressDialog进度条对话框
- git获取远端版本库上的Tag (没有clone[远端的版本库太大了])
- url中的jsessionid解释
- POJ训练计划1459_Power Network(网络流最大流/Dinic)
- 项目实践中--Git服务器的搭建与使用指南（转）
- 一段神奇的代码-关于PHP字符变量奇怪现象的解释
- Git 版本退回commit
- Centos中git的安装
- Python总结（二）
- github个人作业
热门文章
- LightOJ 1258 Making Huge Palindromes (Manacher)
- 面试题：测试给定的list，使用for，foreach，iterator删除元素的不同表现
- C++读取txt文件（VS）
- windows phone开发必备工具翔
- Java Serializable（序列化）的理解和总结
- RabbitMQ单机集群搭建出现Error: unable to perform an operation on node 'rabbit1@ClusterNode1'
- 转载：ResultMap和ResultType在使用中的区别
- Codeforces Round #545 (Div. 2)D（KMP，最长公共前后缀，贪心）
- python字符串常用方法、分割字符串等
- 洛谷P3122 [USACO15FEB]圈住牛Fencing the Herd（计算几何+CDQ分治）