运用flex和rem为移动端布局

flex是对于页面一个非常重要的样式，不会用到px来布局，用rem来代替
rem是根据根文档，也就是html标签上的字体大小来运算的1rem=16px;
手机端的布局也很简单，掌握好flex所有的属性和rem写页面就是一件很轻松的事。
flex的知识过多，咱们只说能应用到的：

HTML

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<title>flexPhone</title>
	</head>

	<body>
		<div class="container">
			<div class="nav">
				<div class="nav-header">Logo</div>
				<!--商标-->
				<ul class="nav-right">
					<li>Demo 1</li>
					<li>Demo 2</li>
					<li>Demo 3</li>
					<li>Demo 4</li>
				</ul>
			</div>
			<!--导航-->
			<div class="Pagebody">
				<div class="banner"></div>
				<!--banner图-->
				<div class="main">
				 
				</div>
				<!--主体内容-->
			</div>
			<!--主体部分-->
			<div class="footer">
				<div class="footer-list">List 1</div>
				<div class="footer-list">List 2</div>
				<div class="footer-list">List 3</div>
				<div class="footer-list">List 4</div>
			</div>
			<!--底部选框-->
		</div>
	</body>

</html>

CSS

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

html,
body,
.container {
	width: 100%;
	height: 100%;
	font-size: 100px;
}

.container {
	font-size: 0.12rem !important;
	display: flex;
	flex-direction: column;
}

.nav {
	top: 0;
	border-bottom: 0.01rem solid lightgray;
}

.nav,
.footer {
	background: linear-gradient(to bottom, #333, #444, #333);
	color: white;
	position: fixed;
	width: 100%;
	height: 0.5rem;
	box-sizing: border-box;
	padding: .16rem 0.16rem;
}

.footer {
	border-top: 0.01rem solid lightgray;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.nav .nav-header {
	font-weight: bold;
	color: #fff;
	line-height: 100%;
	font-size: 0.18rem;
	float: left;
}

.nav .nav-right {
	float: right;
}

.nav .nav-right li {
	float: left;
	margin-left: 0.12rem;
}

.Pagebody {
	flex:1;
	padding-top: 0.5rem;
}

.banner {
	width: 100%;
	height: 1.5rem;
	background: cornflowerblue;
}

.main{
	box-sizing: border-box;
	height: auto;
	padding:0 0.16rem;
}

效果演示

在这里插入图片描述

书写时注意↓

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

这是在移动端布局时必须有的标签，意思是能让用户缩放屏幕的大小，页面宽度=设备宽度，我在这里用的设备型号是iPhone5的屏幕

html和body及自定义一个盒子来包裹页面，即 .container
这里把html的字体设为100px,那么rem就与px成了百倍的关系；即，1rem=100px
涉及到的flex

display: flex;	/*显示方式设置为flex*/
flex-direction: column;  /*显示方向为 纵向*/
flex:1;			/*分配为1份，加入有两个pagebody每个就占总高的1/2*/
align-items: center;	/*设置轴线上子元素 为 居中*/
justify-content: space-around;	/*排列方式 为 平均分配 且 两端留有空余*/

运用flex和rem为移动端布局

HTML

CSS

效果演示

书写时注意↓

猜你喜欢