移动端页面的固定布局

最新推荐文章于 2022-06-09 20:40:11 发布

clqxmt

最新推荐文章于 2022-06-09 20:40:11 发布

阅读量401

点赞数

分类专栏： CSS 文章标签：移动端页面的固定布局

本文链接：https://blog.csdn.net/weixin_43755513/article/details/98322543

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			a{text-decoration: none;}
			img{vertical-align: top; border: none;}
			li{list-style: none;}
			html,body{height: 100%;}
			html{font-size: 31.25vw;}
			 /*html的font-size原值为100px(font-size的值可以随意设)，使用1vw=3.2px把100px转换为31.25vw*/
			body{display: flex; flex-direction: column; font-size: 16px;}
			/*使body(如果有div就写div)变成弹性盒，然后从上至下排列，默认里面的字体都为16px,不会影响下面的rem*/
			header{height: 0.44rem; background: #0cc440;}
			/*设置header的高，测量出来的高先除以2，然后在除以html的font-size值，转换为rem单位*/
			section{flex: 1; overflow: auto;}
			/*设置section在body里所占的份数，overflow:auto;使其自适应，可以实现滑动。*/
			footer{height: 0.44rem; border-top: 1px solid #000; box-sizing: border-box;}
			/*高的设置和header一样，box-sizing把footer变为怪异盒，不计算边框的宽度。*/
		</style>
	</head>
	<body>
		<header>1</header>
		<section>2</section>
		<footer>3</footer>
	</body>
</html>

clqxmt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端页面的固定布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"...
复制链接

扫一扫