Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
em原理与应用
em,rem的运用
1.什么是em?
em: 是浏览器文本的默认字号的相对关键字,大多数浏览器em通常是16px
2.em应用在哪 ?
设置响应式的文本字号,font-size:
是允许被继承的;当前元素的字号,继承自它的父级及其祖先元素(body , html
)
注:当前p元素的 font-size:
为1em是 则继承了body
设置的16px;如果body
设置20排序,则当前元素的1em为20px
;em也可以用于任何元素
3.设置盒模型的属性的响应式
em也可以用于设置盒模型的属性的响应式
<div class="div1"></div>
<hr>
如果给当前元素设置font-size: 设置 则重新定义像素
<div class="div2"></div>
因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了
rem
因em: 动态性和继承性,但是也有缺点
我们非常的需要一个固定值的em,它不应该随着它自身和祖先元素的字号大小而变动
而用rem
就可以解决掉, rem
就是一个固定值的em
html在一个页面中它是唯一的且是最大的包含块,也叫根元素
所以,在html中定义的em大小,可看成一个常量(固定的值)
此时,我们用一个新的关键字rem来引用根元素中的字号大小font-size
的值
例如:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
html{
/* 设置根元素字号 */
font-size: 20px;
}
/* 后面就可以直接使用"rem"来引用定义字号或其它属性 */
div{
/*此时 1.5rem : 1.5 * 20px = 30px; */
font-size: 1.5rem;
width: 10em;/*宽度为 10em*20排序=300px*/
height: 10em;
background-color: burlywood;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
以后的字号,强烈推荐使用rem设置,元素用em设置
vh 与 vw
视口: “可视窗口”,浏览器窗口中用于显示文档的可视区域
vh: 视口的”初始包含块”的高度的百分之一(1/100)
vw: 视口的”初始包含块”的宽度的百分之一(1/100)
初始包含块: 目前 可以简单的理解为”html”
这个主要用于移动端布局
<!DOCTYPE html>
<html lang="en">
<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">
<title>视口单位: vh / vw</title>
<style>
div{
width: 80vw; /*宽度的80%*/
height: 100vh;/*高度的100%*/
background-color: cyan;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>视口: "可视窗口",浏览器窗口中用于显示文档的可视区域</p>
<p>vh: 视口的"初始包含块"的高度的百分之一(1/100)
vw: 视口的"初始包含块"的宽度的百分之一(1/100)
初始包含块: 目前 可以简单的理解为"html"
这个主要用于移动端布局
</p>
</div>
</body>
</html>
总结:em,rem 主要用于内容区的自适应元素,而vh,vw用于设置不同设备的可视窗口。
综合小案例
<!DOCTYPE html>
<html lang="en">
<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">
<title>em实现响应式布局</title>
<style>
html{
font-size: 1em;
}
main{
width: 100vw;
height: 100vh;
background-color: indianred;
}
/* vmax,vw,vh同为视口单位 */
/* 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax */
/* vw/vh/vmin/vmax是视窗单位,也是相对单位。相对的不是父节点或页面的根节点,而是由视窗(viewport)的大小决定的,单位1,代表类似于1% */
/* main{
width: 80vmax;
height: 80vmax;
background-color: lightgreen;
margin: auto;
} */
div{
width: 30em;
height: 15em;
background-color: burlywood;
margin: auto;
box-sizing: border-box;
padding: 1em;
}
h3{
color: chocolate;
}
p{
font-size: 0.8rem;
text-indent: 2em;
color: #a1a1a1ee;
}
/* 屏幕宽度 >= 800px, 字号放大到30px */
@media screen and (min-width: 800px) {
html{
font-size: 1.5em;
}
div{
background-color: cornflowerblue;
}
}
@media screen and (min-width: 1200px) {
html{
font-size: 1.8em;
}
div{
background-color: rgb(234, 252, 252);
}
}
</style>
</head>
<body>
<main>
<div>
<h3>响应式页面的实现</h3>
<p>目前一般常见的实现响应式有两种方法,一种是利用媒体查询,另外一种是bootstrap下的栅格布局,以后介绍bootstrap的时候来介绍栅格布局,这里主要来说一下如何利用媒体查询实现响应式布局。
媒体查询,即 @media 查询,媒体查询可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式,所以将媒体查询相关的代码放在css文件的最下方即可。</p>
</div>
</main>
</body>
</html>