• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>JavaScript

rem实现响应式布局 js动态计算rem

作者:Miao 阅读:3593次

什么是rem

  • rem是相对于根元素(html标签)的字体大小的单位。

  • css3规定1rem=html根节点的font-size,rem也就是root em简写。

动态计算rem

  • 核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。

  • 实现手段:动态获取当前视口宽度width,除以一个固定的数n,得到rem的值。表达式为rem = width / n。通过此方法,rem大小始终为width的n等分。

  • 最终效果:通常设计稿是指定的某个分辨率(比如常见移动端750px),要想在不同分辨率下看到同样的效果(等比例缩放),这里就需要使用js动态计算rem,达到我们想要的效果。

计算代码

<script type="text/javascript">
	(function(doc, win) {
		var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function() {
				var clientWidth = docEl.clientWidth;
				clientWidth > 750 && (clientWidth = 750),
					clientWidth < 375 && (clientWidth = 375),
					docEl.style.fontSize = 100 * (clientWidth / 750) * (window.devicePixelRatio || 1) + 'px';
			};

		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>

扩展

  • 设备像素也就是物理像素:是屏幕上的一个个无法再拆分的点。

  • 设备独立像素:是虚拟像素(横坐标轴上或纵坐标轴上的),比如某一台手机分辨率(设备像素)是480*800,纵向手持的宽度(设备独立像素)是320px,那么设备像素比就是480/320=1.5。

  • 设备像素比:设备像素比 = 设备像素 / 设备独立像素。

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com

标签:JavaScript