【JS自适应】自适应屏幕更改页面 html根文字大小 JS 代码

Sam9029

已于 2022-08-22 13:57:00 修改

阅读量677

点赞数

分类专栏： JS学习文章标签： javascript html 前端

于 2022-07-20 05:00:00 首次发布

本文链接：https://blog.csdn.net/m0_61486963/article/details/125882432

版权

JavaScript 自适应屏幕尺寸字体大小 Flex布局

关键词由CSDN通过智能技术生成

JS学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

自适应屏幕更改页面 html根文字大小 JS 代码

可直接运行
注意事项
- 此处设计图以 750 为准（可根据设计稿-改大小）
- 当设计稿 750 时刚好 1rem = 100px
- 100 * (clientWidth / 750)
  - 100 ? 是份数? 什么份数？

(function(doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function() {
		            var clientWidth = docEl.clientWidth;
		            if(!clientWidth) return;
		            if(clientWidth >= 750) {
		                docEl.style.fontSize = '100px';
		            } else {
		                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		            }
		        };
		 
		    if(!doc.addEventListener) return;
		    
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window)

拓展

结合flex 布局使用可达到更加层次连续渐进的优美效果！！！！

测试文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>test</title>
	<style>
		main{
			width: 2rem;
			height: 2rem;
			background-color: tomato;
		}
		p{
			font-size: 0.2rem;
		}
	</style>
</head>
<body>
	<main>
		<p>hello world！</p>
	</main>
	<script>
		(function(doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function() {
		            var clientWidth = docEl.clientWidth;
		            if(!clientWidth) return;
		            if(clientWidth >= 750) {
		                docEl.style.fontSize = '100px';
		            } else {
		                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		            }
		        };
		 
		    if(!doc.addEventListener) return;

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