手机端rem适配模板,js动态修改根节点字体大小

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机端rem适配模板</title>
    <script>
        (function (doc, win) {
            setRem();
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    setRem();
                };
            if (!doc.addEventListener)
                return;
            win.addEventListener(resizeEvt, recalc, false);
            // doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
 
        function setRem() {
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) {
                return;
            }
            docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
        }
    </script>
    <style>
        html {
            font-size: 20px;
            max-width: 640px;
            min-width: 375px;
        }
 
        body {
            padding: 0;
            margin: 0;
        }
 
        ul, li, ol, input {
            box-sizing: border-box;
        }
 
        input {
            outline: none;
        }
 
        li {
            list-style: none;
        }
 
        a {
            text-decoration: none;
            color: black;
        }
 
        .container {
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }
 
        header {
            width: 100%;
        }
 
        .content {
            flex: 1;
            width: 100%;
        }
 
        footer {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <header>header</header>
    <div class="content">1</div>
    <footer>footer</footer>
</div>
<script type="text/javascript">//JS监听浏览器文字大小代码
(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 = 20 * (clientWidth / 320) + 'px';
        };
 
 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
 
})(document, window);
</script>
</body>
</html>

posted @ 2021-07-13 15:39 lambertlt 阅读(102) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

历史上的今天：
2020-07-13 git 升级方法最简单

公告

昵称： lambertlt
园龄： 4年11个月
粉丝： 18
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

lambert's blog

停杯投箸不能食，拔剑四顾心茫然

手机端rem适配模板,js动态修改根节点字体大小

公告

搜索

我的标签

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>手机端rem适配模板</title>
	<script>
	(function (doc, win) {
	setRem();
	var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
	setRem();
	};
	if (!doc.addEventListener)
	return;
	win.addEventListener(resizeEvt, recalc, false);
	// doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);

	function setRem() {
	var docEl = document.documentElement;
	var clientWidth = docEl.clientWidth;
	if (!clientWidth) {
	return;
	}
	docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
	}
	</script>
	<style>
	html {
	font-size: 20px;
	max-width: 640px;
	min-width: 375px;
	}

	body {
	padding: 0;
	margin: 0;
	}

	ul, li, ol, input {
	box-sizing: border-box;
	}

	input {
	outline: none;
	}

	li {
	list-style: none;
	}

	a {
	text-decoration: none;
	color: black;
	}

	.container {
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	}

	header {
	width: 100%;
	}

	.content {
	flex: 1;
	width: 100%;
	}

	footer {
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>header</header>
	<div class="content">1</div>
	<footer>footer</footer>
	</div>
	<script type="text/javascript">//JS监听浏览器文字大小代码
	(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 = 20 * (clientWidth / 320) + 'px';
	};


	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);

	})(document, window);
	</script>
	</body>
	</html>