rem

最新推荐文章于 2021-05-13 13:27:48 发布

原创最新推荐文章于 2021-05-13 13:27:48 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rem #布局

前端专栏收录该内容

17 篇文章

订阅专栏

博客介绍了基于JS实现rem布局的原理和方法。通过真实宽度与设计图宽度、真实字体号大小与设计图字号大小的比例关系，在JS中获取当前页面宽度，计算出真实字体字号大小并赋给html的字号，作为rem计算比例，进而设置容器宽度。

js原理就是真实宽度/设计图宽度 = 真实字体号大小/设计图字号大小
所以 js应该是获取当前页面的宽度为真实宽度
然后通过上面这个公式把真实字体字号大小求出来
然后这个真实字号大小赋给html的字号作为rem的计算比例
最后再根据这个计算比例来设置所有容器的宽度
需要在JS里面设置的是设计图字号和设计图的宽度
然后再计算出来真是的宽度

<script type="text/javascript">
		(function() {
			change();

			function change() {
				/* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的htm
				 * l的fontSize（clientWidth  新的值）就是clientWidth*20/320 */
				document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 320 + 'px';
				console.log(document.documentElement.style.fontSize)
			}
			/* 监听窗口大小发生改变时 */
			window.addEventListener('resize', change, false)
			window.addEventListener('pageshow', change, false);

		})();
	</script>

<div id="">
			我是10REM
		</div>

<style type="text/css">
			div {
				background: red;
				width: 10rem;
			}
		</style>