HTML移动端单位 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		#top{
			position: absolute;
			top:0;
			height: 20%;
			background: blue;
			text-align: center;
			width: 100%;
			color:#FFf;
			font-size: 5em;  
		}
		#bottom{
			position: fixed;
			bottom:0;
			height: 20%;
			background: blue;
			text-align: center;
			width: 100%;
			color:#FFf;
		}
	</style>
	<body>
		<!--在很久以前使用em/百分比
		后来又发现了一个新单位rem/vw;vh-->
		<div id="top">顶部导航条</div>
		<div id="body">
			使用em为单位,会根据父元素的字体大小为参考,比如父元素字体大小为12px,1em=12px;
			使用rem为单位,会根据html根元素的字体大小为参考。
			使用vw，vh作为单位是以当前屏幕视口为参考，
			1vw=宽度的1%
		</div>
		<div id="bottom">底部选项卡</div>
		
	</body>
</html>

 

posted @ 2023-03-17 18:53  JackieDYH  阅读(28)  评论(0)    收藏  举报  来源