为了账号安全,请及时绑定邮箱和手机立即绑定

rem

2019.08.01 12:49 1290浏览

1.rem说明:相对长度单位,相对于根元素(即html元素)的font-size来计算

2.rem与px的转换

rem是相对于根元素html的font-size的属性来计算的。

所以我们只需要在html根元素确定一个参考值(font-size),这个参考值设置为多少,完全可以根据您自己的需求来定。

html 默认 font-size = 16
  px  |        rem      
 - - - - - - - - - - -
  12  | 12/16 = .75  
  14  | 14/16 = .875  
  16  | 16/16 = 1    
  18  | 18/16 = 1.125 
  20  | 20/16 = 1.25  
  24  | 24/16 = 1.5    
  30  | 30/16 = 1.875 
  36  | 36/16 = 2.25   
  42  | 42/16 = 2.625 
  48  | 48/16 = 3

为了方便计算,当我们把参考值font-size设置为10px时

    px    |          rem      
 -  -  -  -  -  -  -  -  -  -  -
    12    |  12/10 = 1.2  
    14    |  14/10 = 1.4  
    16    |  16/10 = 1.6    
    18    |  18/10 = 1.8
    20    |  20/10 = 2.0  
    24    |  24/10 = 2.4   
    30    |  30/10 = 3.0
    36    |  36/10 = 3.6  
    42    |  42/10 = 4.2
    48    |  48/10 = 4.8

因此 1rem 就等于html根元素设定的font-size的px值。

例:

我们设置html { font-size:12px; } , 之后的div宽高都以这个12为基数来换算,

设定一个div{width:3rem;height:2.5rem;}

换算成px : div{ width:36px;height:30px;}

这时  1rem = 12px

3.各种型号的手机、ipad屏幕都不一样大,那html的font-size到底应该设为多少好呢?

试过两种办法:

    1. 利用@media媒体查询屏幕大小来控制html的font-size,以此来达到根据屏幕大小来展示页面的效果

    2. 使用js来控制

//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
;(function(designWidth, maxWidth) {	var doc = document,	win = window,	docEl = doc.documentElement,	remStyle = document.createElement("style"),	tid;	function refreshRem() {		var width = docEl.getBoundingClientRect().width;		maxWidth = maxWidth || 540;		width>maxWidth && (width=maxWidth);		var rem = width * 100 / designWidth;		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}	if (docEl.firstElementChild) {		docEl.firstElementChild.appendChild(remStyle);
	} else {		var wrap = doc.createElement("div");		wrap.appendChild(remStyle);		doc.write(wrap.innerHTML);		wrap = null;
	}	//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
	refreshRem();	win.addEventListener("resize", function() {		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);	win.addEventListener("pageshow", function(e) {		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);			tid = setTimeout(refreshRem, 300);
		}
	}, false);	if (doc.readyState === "complete") {		doc.body.style.fontSize = "16px";
	} else {		doc.addEventListener("DOMContentLoaded", function(e) {			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);  //需要根据你的设计稿的大小来调整脚本最后的两个参数。

4.说明 

 rem 属于css3 中的一个属性,在众多浏览器中已经得到了较好的支持,但以下较老的浏览器不兼容(IE8及以下,火狐3.5及以下,safari4.0及以下等),所以对浏览器兼容性要求极高的项目不推荐使用,如果有不足请大家及时提醒以便及时更正

参考:http://caibaojian.com/rem-and-px.html 

          http://caibaojian.com/simple-flexible.html

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消