rem.js的用法及在浏览器端的适配

更新日期: 2019-02-20阅读: 5.1k标签: 移动端

首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述.......

随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机......

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、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;}即可。。。。

链接: https://www.fly63.com/article/detial/2078

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因

在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN-NaN ,例如getTime()在ios上拿不到时间戳显示NaN

再聊移动端页面的适配

因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动web开发之视口viewport_浅谈移动端中的视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!