rem js相关

时间: 2019-11-07阅读: 509标签: rem
!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载。

其中 var n=t.clientWidth||320;n>720&&(n=720);的意思是:如果clientWidth的值获取不到,n就等于320,如果n>720成立就会执行n=720的操作

M && N中,若M为假,则N不被执行;
M||N中,若M为真,则N不被执行。

上面这段js手机上在有表单的时候,在输入法弹出的时候会失灵

代码一:

(function(win) {
	if(!win.addEventListener) return;
	var html = document.documentElement;

	function setFont() {
		function setRem() {
			var cliWidth = html.clientWidth;
			var w = document.documentElement.clientWidth,
				h = document.documentElement.clientHeight;
			var val = 640;

			if(w >= 640) {
				cliWidth = 640;
			}
			//                        if(w > h) {
			//                            //横屏
			//                            val = 1334;
			//                        }
			html.style.fontSize = 100 * (cliWidth / val) + ‘px‘;
		}
		setRem();
		setTimeout(function() {
			setRem();
		}, 300);

	}
	win.addEventListener(‘resize‘, setFont, false);
	setFont();
})(window);


代码二 :

//屏幕适应
(function(win, doc) {
	if(!win.addEventListener) return;
	var html = document.documentElement;
	function setFont() {
		var html = document.documentElement;
		var cliWidth = html.clientWidth;
		var k = 640;
		if(cliWidth >= 640) {
			cliWidth = 640;
		}
		html.style.fontSize = cliWidth / k * 100 + "px";
	}
	setFont();
	setTimeout(function() {
		setFont();
	}, 300);
	doc.addEventListener(‘DOMContentLoaded‘, setFont, false);
	win.addEventListener(‘resize‘, setFont, false);
	win.addEventListener(‘load‘, setFont, false);
})(window, document);


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6350

移动端适配flexible rem布局方案

如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。

移动端rem适配

1:css3的media query来实现适配,例如下面这样;2.通过js动态设置html字体,例如下面这样:默认设计图为640的情况下1rem=100px;根据自己需求修改

了解并使用 CSS 中的 rem 单位

今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。

小程序如何实现rem?

最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size

css中1px等于多少rem?

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>。

华为,小米部分机型微信浏览器rem不适配的解决方案

针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案,目前来看,产生这个情况的原因是因为给html附font-size时

适用于移动设备弹性布局的js脚本(rem单位)

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了

css rem应用

根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem

rem布局完成响应式开发,通俗且详细的原理解析和代码实现

rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广