2022年6月6号Rem布局案例讲解:本文的学习内容是在软件上安装了Less：

2022年6月6号Rem布局案例讲解:本文的学习内容是在软件上安装了Less：

---

2022年5月7号CSS预处理器课时一:_@Live@And@Learn@#的博客-CSDN博客

---

第一部分:区分PX EM Rem

---

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 @1 PX特点

• 1. IE无法调整那些使用px作为单位的字体大小；
• 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
• 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

---

@2 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

 

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

• 1. body选择器中声明Font-size=62.5%；
• 2. 将你的原来的px数值除以10，然后换上em作为单位；
• 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

---

@3 REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;} 注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

---

第二部分:利用四个小案例+一个大案例:深度的来学习Rem布局：

---

案例一效果图:

 

	
		
		
		
		
		
			
			
			
	
	
		
			移动端布局方案
			1.流式布局

				　　高度固定，气象
			2.响应式布局

				　　使用能力设置代码适应不同尺寸
			3.重新布局

				　　宽高影像，能够像整张图片一样缩放不失真的效果。

			em：是一个相对单位，计算方法为用元素的带px属性除以自身大小，用价值不大。
				
rem: 是一个，是一个，为一个html中任意元素的根带px的元素的大小，相对实现单位文件的高值属性以除html的大小来计算。
				
		
		
		
		我是em中400*400的盒子模型
		
		
			我是rem中400*400的盒子模型
	

案例二:效果图:

---

 

	
	
	
	
	


	REM布局
	
字体大小色彩
	
		
字体大小色彩
		
字体大小色彩
		字体大小色彩
	
	
	

---

案例三:效果图展示:这里多了一个知识点:媒体查询： 首先:看下媒体查询的语法格式是什么?

---

媒体查询定义的语法:@media mediatype and|not|only (media feature) {
			CSS-Code;
			}

---

记住下面的三句话:最大 最小 取值在中间  : 第一句话:比如我有 10元   50元    100元     最大值 为100元   最小值 为10元  中间值为50元 这50元在最大值最小值的中间。 第二句话:比如我有 A B C 已经知道他们的排序为 C>A>B   最大值 为C   最小值 为B元  中间值为元A 这A在最大值最小值的中间。 第三句话:仔细分析媒体查询的内容: @1 当浏览器的宽度最大值在960px的时候 执行下面的语法: background-color:skyblue;
            font-size: 44px;

@media screen and (max-width:960px) { 
        body{
            background-color:skyblue;
            font-size: 44px;
        }

@2当浏览器的宽度最小值在961px的时候 执行下面的语法:background-color: lavender;
            font-size: 100px;

@media screen and (min-width:961px) {
        body{
            background-color: lavender;
            font-size: 100px;
        }

@3:当浏览器的宽度处在最大值和最小值的中间时执行下面的语句: background-color:black;
            font-size: 50px;

    @media screen and (min-width:540px) and (max-width:960px) {
        body{
            background-color:black;
            font-size: 50px;
        }
    }

---

运行效果图:

当浏览器的宽度最大值在960px的时候 执行下面的语法: background-color:skyblue;
            font-size: 44px;

 

当浏览器的宽度处在最大值和最小值的中间时执行下面的语句: background-color:black;
            font-size: 50px;
 

 

@2当浏览器的宽度最小值在961px的时候 执行下面的语法:background-color: lavender;
            font-size: 100px;

 

---

为了能认浏览者更好的理解:我用一个小案例:将上面的内容总和起来:

	
		
		
		
		
		
	
	
		购物车
		媒体查询定义的语法:@media mediatype and|not|only (media feature) {
			CSS-Code;
			}
	

效果展示:语法自己回去分析:

 

 

 

 

---

第四部分:关于Rem布局的知识点又是这些内容:接下来案例实操:项目效果图。实操过程只有代码没有为什么这样去做。

---

内容原创编写

 

---

less文件ctrl+s会出现一个css文件内容:

---

//设置不同屏幕下的字体大小
//份数为15 默认字体为 50px
//最上面
html{
	font-size: 50px;
}

@no:15;

@media screen and (min-width:320px) {
	html{
		font-size: (320px/@n0);
	}
	
}
@media screen and (min-width:320px) {
		html{
			font-size: (360px/@n0);
		}
		}
		
@media screen and (min-width:375px) {
	html{
	font-size: (375px/@n0);@n0
		}
	}
				
				
@media screen and (min-width:384px) {
	html{
	font-size: (384px/@n0);
		}		
	}
	

@media screen and (min-width:400px) {
	html{
	font-size: (400px/@n0);
		}
	}
				
@media screen and (min-width:414px) {
	html{
	font-size: (414px/@n0);
		}
	}
@media screen and (min-width:424px) {
	html{
	font-size: (424px/@n0);@n0
		}
	}
@media screen and (min-width:540px) {
	html{
	font-size: (540px/@n0);
		}
	}
	@media screen and (min-width:720px) {
	html{
	font-size: (720px/@n0);
		}
	}
@media screen and (min-width:750px) {
	html{
	font-size: (750px/@n0);
		}
	}										
										
									

Css文件：

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

---

注意:index.html中 建立index.less文件 代码的编译在less文件 写完后ctrl+s会自动转为Css文件:

---

//导入文件相当于link
@import "common.css";
@befont:50;

body{
	font-family: Arial, Helvetica, sans-serif;
	min-width: 320px;
	// width: 750px;
	width: (750rem/(750px/15));
	margin: 0 auto;
	line-height: 1.5;
	background-color: #f2f2f2;
	
	letter-spacing 2px; 
}

 

@import "common.css";

body {
  font-family: Arial, Helvetica, sans-serif;
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  background-color: #f2f2f2;
  
  letter: spacing 2px;
  
}

---

之前的操作为后面写页面打好铺垫:

---

完成第一部分:项目导航栏 

项目导航栏

.search-content{
	z-index: 9;
	
	// position: fixed;
	transform: translate(-50%);
	left: 50%;
	top: 0%;
	display: flex;
	// width: 750rem/50;
	width:(750rem/@befont);
	height:(88rem/@befont);
	background-color: #8663fd;
	border: 1px solid black;
	background-size:(70rem/@befont) (44rem/@befont) ;
	.classify{
		width: 44rem/@befont;
		height: 70rem/@befont;
		border: 1px solid black;
		// background-color: pink;
		
		font-size:(25rem/@befont) ;
		
		// margin: 11 25 7 24;
		margin: (11rem/@befont) (25rem/@befont) (7rem/@befont) (24rem/@befont);
	}
	
	
	.search{
		flex: 1;
	}
	
	
	
	.login{
		float: right;
		width: (75rem)/@befont;
		height: (70rem)/@befont;
		line-height: (70rem)/@befont;;
		margin: (10rem/@befont);
		font-size:(25rem/@befont) ;
		text-align: center;
		color: black;
		}
		
	.search input{
		margin-bottom:2px;
		border:  1px solid back;
		color: red;
		border-radius: 15px;
		// width: (500rem)/@befont;;
		height: (70rem)/@befont;;
		font-size:(25rem/@befont) ;
		width: 90%;
		height: (66rem)/@befont;
		background-color: lightblue;

	}
		

 

.search-content {
  z-index: 0;
  
  
  
  
  
  display: flex;
  width: 15rem;
  height: 1.9rem;
  background-color: #8663fd;
  
  background-size: 1.4rem 0.88rem;
}
.search-content .classify {
  width: 1rem;
  height: 1rem;
  
  
  font-size: 0.5rem;
  margin: 0.1rem 0.1rem 0.1rem 0.1rem;
}
.search {
  flex: 1;
}






.login {
  float: right;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  margin: 0.1rem;
  font-size: 0.3rem;
  text-align: center;
  color: black;
}
.search input {
  margin-bottom: 2px;
  
  color: red;
  border-radius: 12px;
  height: 1.4rem;
  font-size: 0.5rem;
  width: 100%;
  height: 1.32rem;
  
}

---

完成第二部分

标题

 

 

---

.back{
	position: relative;
	width: 15rem;
	height: (270rem/@befont);
	
	overflow: hidden;
	margin-top:(88rem)/50 ;
	
	&::before{
		position: absolute;
		left: -20%;
		content: " ";
		width: 140%;
		height: (250rem/@befont);
		border-radius: 0 0 50% 50%;
		background-color: #ffc001;
		
		
		z-index: -1;
	}
	
	
	&::after{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%);
		border-radius: (15rem/@befont);
		// display: block;
		content: "";
		width: (700rem/@befont);
		height: (250rem/@befont);
		background-color: paleturquoise;
		background: url(upload/banner.jpg) no-repeat bottom;
		box-sizing: 100%;
		
			}
		}
		
		

完成第三部分:

.brand div a {
  float: left;
  width: 33.333%;
}
.brand div a img {
  width: 100%;
  height: 5rem;
  
}

 

 

---

完成第四部分

			
				
				苏神秒杀
			
		
		
			
				
				苏式超市
			
		
		
			
				
				苏式品购
			
		
		
			
				
				手机加码
			
		
		
			
				
				苏时加电
			
		
		
			
				
				免费水果
			
		
		
			
				
				super会员
			
		
		
			
				
				答题有礼
			
		
		
			
				
				领券中心
			
		
		
			
				
				更多频道
			
		

.nav1 {
  width: 15rem;
}
.nav1 a {
  float: left;
  text-align: center;
  display: block;
  width: 3rem;
  height: 2.8rem;
  background-color: #f2f2f2;
}
.nav1 img {
  display: block;
  width: 1.68rem;
  height: 1.68rem;
  margin: 0.2rem auto;
}
.nav1 span {
  display: block;
  font-size: 0.48rem;
  font-weight: 78;
}

 

完成第五部分:

			
				
				标志二
			
		
		
			
				
				标志三
			
		
		
			
				
				标志四
			
		
		
			
				
				标志五
			
		

 

.nav1 img {
  display: block;
  width: 1.68rem;
  height: 1.68rem;
  margin: 0.2rem auto;
}
.nav1 span {
  display: block;
  font-size: 0.48rem;
  font-weight: 78;
}

 完成第六部分

 

.foots{
	z-index: 9;
	
	position: fixed;
	transform: translate(-50%);
	left: 50%;
	top: 80%;
	width: 15rem;
	height: 1.9rem;
	
}

 

---

//导入文件相当于link
@import "common.css";
@befont:50;

body{
	font-family: Arial, Helvetica, sans-serif;
	min-width: 320px;
	// width: 750px;
	width: (750rem/(750px/15));
	margin: 0 auto;
	line-height: 1.5;
	background-color: #f2f2f2;
	
	letter-spacing 2px; 
}



span:hover{
	background-color:#709ce6 ;
	color: #ffc001;
	border-radius: 0.16rem;
}


.search-content{
	z-index: 9;
	
	// position: fixed;
	transform: translate(-50%);
	left: 50%;
	top: 0%;
	display: flex;
	// width: 750rem/50;
	width:(750rem/@befont);
	height:(88rem/@befont);
	background-color: #8663fd;
	border: 1px solid black;
	background-size:(70rem/@befont) (44rem/@befont) ;
	.classify{
		width: 44rem/@befont;
		height: 70rem/@befont;
		border: 1px solid black;
		// background-color: pink;
		
		font-size:(25rem/@befont) ;
		
		// margin: 11 25 7 24;
		margin: (11rem/@befont) (25rem/@befont) (7rem/@befont) (24rem/@befont);
	}
	
	
}
	.search{
		flex: 1;
	}
	
	
	
	.login{
		float: right;
		width: (75rem)/@befont;
		height: (70rem)/@befont;
		line-height: (70rem)/@befont;;
		margin: (10rem/@befont);
		font-size:(25rem/@befont) ;
		text-align: center;
		color: black;
		}
		
	.search input{
		margin-bottom:2px;
		border:  1px solid back;
		color: red;
		border-radius: 15px;
		// width: (500rem)/@befont;;
		height: (70rem)/@befont;;
		font-size:(25rem/@befont) ;
		width: 90%;
		height: (66rem)/@befont;
		background-color: lightblue;

	}
		



a{
	text-decoration: none;
	background-color: antiquewhite;

}


.back{
	position: relative;
	width: 15rem;
	height: (270rem/@befont);
	
	overflow: hidden;
	margin-top:(88rem)/50 ;
	
	&::before{
		position: absolute;
		left: -20%;
		content: " ";
		width: 140%;
		height: (250rem/@befont);
		border-radius: 0 0 50% 50%;
		background-color: #ffc001;
		
		
		z-index: -1;
	}
	
	
	&::after{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%);
		border-radius: (15rem/@befont);
		// display: block;
		content: "";
		width: (700rem/@befont);
		height: (250rem/@befont);
		background-color: paleturquoise;
		background: url(upload/banner.jpg) no-repeat bottom;
		box-sizing: 100%;
		
			}
		}
		
		
		
		

	
.nav{
	width: 15rem;
	a{
		float: left;
		text-align: center;
		display: block;
		width: (150rem/@befont);
		height: (140rem/@befont);
		// border: 1px solid royalblue;
		background-color: #f2f2f2;
	}
	
	img{
		display: block;
		width: (84rem/@befont);
		height: (84rem/@befont);
		margin: (10rem/@befont) auto
	}
	
	span{
		display: block;
		font-size: 24rem/@befont;
		font-weight: 78;
		
		}
		}
		
		

	

.nav1{
	width: 15rem;
	a{
		float: left;
		text-align: center;
		display: block;
		width: (150rem/@befont);
		height: (140rem/@befont);
		// border: 1px solid royalblue;
		background-color: #f2f2f2;
	}
	
	img{
		display: block;
		width: (84rem/@befont);
		height: (84rem/@befont);
		margin: (10rem/@befont) auto
	}
	
	span{
		display: block;
		font-size: 24rem/@befont;
		font-weight: 78;
		
		}
		}
		
		
.brand{
	
}
.brand div a{
	float: left;
	width: 33.333%;
}
.brand div a img{
	width: 100%;
	height: (250rem/@befont);
	
}


footer image{
	width:(750rem/@befont);
}



div{
	background-color: black;
}

	
	
	

上面是完整的Less代码:

@import "common.css";

body {
  font-family: Arial, Helvetica, sans-serif;
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  background-color: #f2f2f2;
  
  letter: spacing 2px;
  
}



.search-content {
  z-index: 0;
  
  
  
  
  
  display: flex;
  width: 15rem;
  height: 1.9rem;
  background-color: #8663fd;
  
  background-size: 1.4rem 0.88rem;
}
.search-content .classify {
  width: 1rem;
  height: 1rem;
  
  
  font-size: 0.5rem;
  margin: 0.1rem 0.1rem 0.1rem 0.1rem;
}
.search {
  flex: 1;
}






.login {
  float: right;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  margin: 0.1rem;
  font-size: 0.3rem;
  text-align: center;
  color: black;
}
.search input {
  margin-bottom: 2px;
  
  color: red;
  border-radius: 12px;
  height: 1.4rem;
  font-size: 0.5rem;
  width: 100%;
  height: 1.32rem;
  
}
a {
  text-decoration: none;
 background: linear-gradient(10deg,#8663fd,#ffffff);
}


.banner{
	position: absolute;
	width: 15rem;
	height: 1.9rem;
	bottom: 0px;
	
}
.back {
  position: relative;
  width: 15rem;
  height: 10rem;
  
  margin: 0px;
   background: linear-gradient(10deg,#8663fd,#ffffff);
  overflow: hidden;
  margin-top: 1.76rem;
  
  
}
.back::before {
  position: absolute;
  left: -20%;
  content: " ";
  width: 140%;
  height: 5rem;
  border-radius: 0 0 50% 50%;
  
  
  z-index: -1;
}
.back::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  border-radius: 0.3rem;
  content: "";
  width: 14rem;
  height: 9rem;
  background-color: paleturquoise;
  background: url(img/165415843590608517.png) no-repeat bottom;
  box-sizing: 100%;
}

.nav {
  width: 15rem;
     background: linear-gradient(10deg,#ffffff,#ffffff);
}
.nav a {
  float: left;
  text-align: center;
  display: block;
  width: 3rem;
  height: 2.8rem;
  background-color: #f2f2f2;
}
.nav img {
  display: block;
  width: 1.68rem;
  height: 1.68rem;
  margin: 0.2rem auto;
}
.nav span {
  display: block;
  font-size: 0.48rem;
  font-weight: 78;
}

.nav1 {
  width: 15rem;
}
.nav1 a {
  float: left;
  text-align: center;
  display: block;
  width: 3rem;
  height: 2.8rem;
  background-color: #f2f2f2;
}
.nav1 img {
  display: block;
  width: 1.68rem;
  height: 1.68rem;
  margin: 0.2rem auto;
}
.nav1 span {
  display: block;
  font-size: 0.48rem;
  font-weight: 78;
}
.brand div a {
  float: left;
  width: 33.333%;
}
.brand div a img {
  width: 100%;
  height: 5rem;
  
}
footer image {
  width: 15rem;
}


.foots{
	z-index: 9;
	
	position: fixed;
	transform: translate(-50%);
	left: 50%;
	top: 80%;
	width: 15rem;
	height: 1.9rem;
	
}

上面是完整的Css代码:

---

总体运行效果：

 

 

 

 

---