移动端rem

最新推荐文章于 2023-05-05 18:07:35 发布

裴嘉靖

最新推荐文章于 2023-05-05 18:07:35 发布

阅读量106

点赞数

分类专栏：小程序 js 文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/peijiajing/article/details/124470225

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

小程序

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>rem</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	</head>
	<body>
		<div class="name" style="text-align: center;">
			标题标题标题标题标题
			</div>

			<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

	
	</body>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div{
			margin-top: 30px;
			color: #2D3E50;
			font-size: 0.3rem;
			padding: 0 5%;
		}

		.name {
			font-weight: bolder;
			font-size: 0.4rem;
		}
	</style>
	<script type="text/javascript">
		(function(doc, win) {
			var docEl = doc.documentElement
			let resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"
			let recalc = function() {
				var clientWidth = docEl.clientWidth;
				// console.log(clientWidth)
				if (!clientWidth) return;
				// docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
				docEl.style.fontSize = 100 * (clientWidth / 750) + "px";

				if (window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize) {
					var size = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[
						0];
					//这里再取出当前html的font-size，和你想附的值进行比较，
					//这里为什么不直接用size< 原因是正常机型的size也不一定等于你想附的值，尝试了很多机型，除了问题机型外，一般差距很小，另一半完全相等;
					//为什么不直接*1.25 也不解释了 最终比例不一定是1.25
					if (size * 1.2 < 100 * (clientWidth / 750)) {
						//如果当前html的font-size 的1.2倍仍然小于 之前想设置的值，就说明是问题机型，给之前想附的值乘1.25倍，这样他会被系统再次除1.25得到的才是我们想附的值
						docEl.style.fontSize = 125 * (clientWidth / 750) + 'px';
					}
				}
			};
			recalc()
			if (!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
</html>

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端rem

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>rem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
复制链接

扫一扫