当前位置：网站首页>Practice | mobile end practice

Practice | mobile end practice

2022-07-05 04:24:00 【Happy happy learning code】

1. Mobile terminal adaptive layout -- Infinite adaptation

There are two main points in this case , One is Taobao flexible.js file , The second is rem and px Conversion of , The third is to convert the size ratio of the picture 

<!DOCTYPE html>
<html>
	<head>
		<!-- <meta charset="utf-8"> -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,use-scalable=no">
		<title></title>
		<script type="text/javascript" src="flexible.js"></script>
	<style>
	*{margin:0;padding:0;}
	html,body,.container{
		width:100%;
		height:100%;
		overflow: hidden;
	}
	ul{
		list-style: none;
	}
	.container{
		display: flex;
		flex-direction: column;
	}
	header{
		width:100%;
		height:2.083333333333333rem;	
	}
	header img{
		width:100%;
		height:100%;
	}
	section{
		flex:1;
		overflow: scroll;
		background-color: #101010;
		color:#fff;
	}
	section .item{
		margin:30px;
	}
	section .item ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	section .item ul li{
		/* width:50%; */
		display: flex;
		flex-direction:column;
		width:4rem;
		height:2.34rem; 
		margin:5px 0;
		font-size:16px;
	}
	.item-title{
		display: flex;
        justify-content: space-between;
		align-items: center;
	}
	section .item img{
		/* width:4.4rem; */
		width:100%;
		height:2.34rem;
		/* height:100%; */
	}
	footer{
		background-color: #1D1D1F;
	}
	footer ul{
		width:100%;
		height:2.133333rem;
		display: flex;
		justify-content: space-between;
		align-items:center;
		font-weight:800;
		font-size:.4266666px;
		color:white;
	}
	footer ul li{
		flex:1;
		text-align:center;
	}

	</style>
	</head>
	<body>
		<div class="container">
			<header>
				<img src="img/1.jpg">
			</header>
			<section>
				<div class="item">
					<div class="item-title">
						<h3> Learn now </h3>
					    <div> more </div>
					</div>
					<ul>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
					</ul>
				</div>
				<div class="item">
					<div class="item-title">
						<h3> Appointment study </h3>
					    <div> more </div>
					</div>
					<ul>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
					</ul>
				</div>
				<div class="item">
					<div class="item-title">
						<h3> Learn more </h3>
					    <div> more </div>
					</div>
					<ul>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
						<li>
							<img src="img/31.png">
							<span> Learning learning learning </span>
						</li>
					</ul>
				</div>
			</section>
			<footer>
				<ul>
					<li> home page </li>
					<li> Online courses </li>
					<li> Learning path </li>
					<li> About us </li>
				</ul>
			</footer>
		</div>
	</body>
</html>

  Learning recommendations ：【 Deer thread 】 Mobile terminal adaptive layout - Infinite adaptation _ Bili, Bili _bilibili

原网站

版权声明
本文为[Happy happy learning code]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140642469153.html

边栏推荐

猜你喜欢

随机推荐