移动端适配的几种方式

最新推荐文章于 2024-09-20 17:00:54 发布

原创最新推荐文章于 2024-09-20 17:00:54 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

在这里插入图片描述

rem适配原理

<script>
			(function(doc, win, designWidth) {
				const html = doc.documentElement;
				
				const refreshRem = () => {
					const clientWidth = html.clientWidth;
					if (clientWidth >= designWidth) { //给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去算（传的第三个参数）
						html.style.fontSize = '100px';
					} else {
						//html.style.fontSize= 16 * clientWidth / 375 + 'px';
						html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
					}
				};
				
				//dom加载完的一个事件
				doc.addEventListener('DOMContentLoaded', refreshRem);
			})(document, window, 750);
		</script>