自适应移动端网页显示

最新推荐文章于 2021-11-09 14:38:08 发布

lavintech

最新推荐文章于 2021-11-09 14:38:08 发布

阅读量193

点赞数

分类专栏： js 前端自适应移动端网页

本文链接：https://blog.csdn.net/lavin00/article/details/108855690

版权

JavaScript 移动端布局自适应内容居中网页开发

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

js 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

自适应移动端网页

1 篇文章 0 订阅

订阅专栏

感谢阅读，更多我的原创实用文，在我的[整理]这篇可以更方便读到。

【总有一篇实用文在等你（原创文，整理）】

我一直想写个自适应移动端网页的功能（不依赖其他框架，纯js实现），然后就一直断断续续的找

了些方法，但是都不怎么合心意。然后，也幸亏在这个过程中尝试，终于实现了这个功能，然后就尽快

码字分享出来。

废话不多说，po代码（注：将下面代码全部内容复制到一个新建html文件就可以查看效果）：

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		
		<!--
		<link rel="shortcut icon" href="">
		-->
		<title></title>
		
		<style>
			*{padding: 0;margin: 0;}
			#StageZero{
				width: 100%;height: 100%;
				position: absolute;
				top: 0;right: 0;bottom: 0;left: 0;
			}
		</style>
	</head>
	
	<body>
	
		<div id="StageZero">
			<div id="MiddleArea"></div>
		</div>
		
		<script>
			//--加载main function。
			window.onload = function (){
				MainFunc();
			};
			
			var pageW;
			var pageH;
			var getIdStageZero = document.getElementById("StageZero");
			var getIdMiddleArea = document.getElementById("MiddleArea");
			
			//--Main Function.
			function MainFunc(){
				getIdStageZero.style.backgroundColor = "BLACK";
				//--（实时刷新）加载一个居中内容div
				var retime = setInterval("theMidArea(10,20,10,20)",50);//--top right bottom left
				
				getIdMiddleArea.innerHTML = "TEST TEST TEST TEST TEST";
				getIdMiddleArea.style.backgroundColor = "GRAY";
			}
			
			//--居中内容div的方法
			function theMidArea(toT,toR,toB,toL){//--top right bottom left
				pageW = document.documentElement.clientWidth;//--可见区域宽
				pageH = document.documentElement.clientHeight;//--可见区域高
				
				getIdMiddleArea.style.position = "absolute";
				//--如果想单独应用内容div距离四个方向的间距。将下面两行中的
				//--toR*2改成toR+toL。toT*2改成toT+toB。
				getIdMiddleArea.style.width = (pageW - (toR*2))+"px";//--内容div的宽 = 可见区域宽-（左+右间距）
				getIdMiddleArea.style.height = (pageH - (toT*2))+"px";//--内容div的高 = 可见区域高-（上+下间距）
				getIdMiddleArea.style.margin = toT+"px "+toR+"px "+toB+"px "+toL+"px";
			}
		</script>
		
		<script  type="text/javascript" src=""></script>
		<link rel="stylesheet" type="text/css" href=""/>
	</body>
</html>

（下图为运行效果）

【如图片显示有问题，可自己运行查看】