hugh 的个人博客

CSS3 rem单位使用

1、rem

font size of the root element(HTML),相对于根元素设定大小。默认情况下 1rem=16px;

2、示例1

<!DOCTYPE html>
<html style="font-size:100px;">
 <head>

</head>

<body>
<div style="width:3rem;height:1.5rem;background:#000;">
</div>
</body>
</html>

 

结果,重置了font-size之后,font-size=100px 等同于 font-size=625%(见示例2)

3、示例2

<!DOCTYPE html>
<html style="font-size:625%">
 <head>

</head>

<body>
<div style="width:3rem;height:1.5rem;background:#000;">
</div>
</body>
</html>

结果

3、自适应

以上两个示例都是固定了font-size,无法实现自适应

示例3:基于720的设计图,为其他屏幕设置各种的font-size

<!DOCTYPE html>
<html style="font-size:625%">
 <head>
	<script>
		(function (doc, win) {
		  var docEl = doc.documentElement,
		  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		  recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
		  };
	  if (!doc.addEventListener) return;
	  win.addEventListener(resizeEvt, recalc, false);
	  doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
&lt;/script&gt;

</head>

<body>
<div style="width:3rem;height:1.5rem;background:#000;">
</div>
</body>
</html>

 结果:在720的大小下,div宽300px 高150px,在其他大小屏幕下,会相应缩放


标题:CSS3 rem单位使用
作者:hugh0524
地址:https://blog.uproject.cn/articles/2016/06/03/1464946655571.html