移动端第二十二章 less+rem+media项目

最新推荐文章于 2024-08-27 15:08:39 发布

LW0512

最新推荐文章于 2024-08-27 15:08:39 发布

阅读量248

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108936370

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

less+rem+media项目

1：移动端页面设计稿尺寸：

--安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px
--苹果手机尺寸：640px 750px

2:通过less+rem+@media技术完成页面在各个手机尺寸上的显示

3：手机页面的准备工作：

--UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px
--前端开发人员再人为的把设计稿分为若干份 如：苏宁分为 15等份
	--(划分页面的份数的目的，只是为了求一个基数值，在写元素大小的时候可以进行换算)
--分完若干等份后，就可以算出不同尺寸页面下 html里面的font-size 字号大小 
	--如：750/15=50 750像素的手机上的html{font-size:50px}
	--如：720/15=48 720像素的手机上的html{font-size:48px}
	...
	--如：320/15=21.33 320像素的手机上的html{font-size:21.33px}

4: 手机上元素的宽高就可以通过除以html里面的字号大小，得到一个rem相对单位的值

效果图：
在这里插入图片描述
具体代码：

<!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>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="h_top">
				<a href="#" class="add">
					<img src="img/1.png" >
				</a>
				<div class="h_gif">
					<img src="img/1.gif" >
				</div>
				<a href="#" class="user">
					<img src="img/2.png" >
				</a>
			</div>
			<div class="h_search">
				爆款家电
			</div>
		</div>
		<!-- 主题内容 -->
		<div class="box_wrap">
			<!-- banner -->
			<div class="banner">
				<div>
					<img src="img/3.png" alt="">
				</div>
			</div>
		</div>
		<!-- 爆款减价 -->
		<div class="mony">
			<a href="#">
				<img src="img/4.png" alt="">
			</a>
			<a href="#">
				<img src="img/5.png" alt="">
			</a>
			<a href="#">
				<img src="img/6.png" alt="">
			</a>
		</div>
		<!-- 导航 -->
		<nav>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
			<a href="#">
				<div>
					<img src="img/1.webp" alt="">
				</div>
				<p>天天低价</p>
			</a>
		</nav>
	</body>
</html>